How to add responsive video in HTML

Nowadays it is very common that in our blogs and web pages, we insert embedded videos to enrich our content. The most normal thing is that for this we use material from services such as YouTube, Vimeo and many others. When we go to these services and request the insert code we will get something similar to this:

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/a5IXuQXiGqM?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

And if you look, it is nothing more than an iframe with predetermined measures. These measures will cause that iframe to always be that size, which means that it will not adapt to all resolutions, screen sizes and terminals.

How do we solve it?

To start we must create a CSS file or add the following CSS to an existing one.

.gsweb-video-responsive {
   height: 0;
   overflow: hidden;
   padding-bottom: 56.25%; /* 16/9 ratio */
   padding-top: 30px; /* IE6 workaround*/
   position: relative;
}

.gsweb-video-responsive iframe,
.gsweb-video-responsive object,
.gsweb-video-responsive embed,
.gsweb-video-responsive video {
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

And from now on, just surround the embed code with this tag.

And voila, simply by inserting these code snippets we have the possibility of making our videos adaptable, regardless of whether they are from YouTube, Vimeo, MP4, among others.

Something you may also consider applying is that the content within the iframe doesn’t matter if it’s video or other information, it will always be customizable since these styles are applied to the iframe tag.

More Information:

https://www.w3schools.com/html/html_iframe.asp
https://www.w3schools.com/tags/tag_iframe.asp