How to create a responsive iframe using CSS?

Nowadays, more and more people use their phones to browse through the web. Hence it is now very important for websites to be responsive. Most websites use YouTube videos, Google maps or other external website elements embedded in them. These functions are most commonly incorporated in a web page using the HTML iframe element and are one of the trickiest things to make responsive.

I have struggled for a long time to get my YouTube videos to keep their ratio on different screen sizes. When testing my website on a smartphone, I would spend hours trying to figure out why my videos did not do what I expected. Until I finally discovered a great CSS trick that I can apply to all my iframes.

You can use the code below to implement over your web:

Was this helpful? Did I miss something? Do you have a question? Get in touch.