Responsive video iFrame and HTML5 bootstrap video to embed in website

Top search engines like Google and Bing are now giving priority to mobile-friendly websites in their search results. This owes to the fact that 85% of internet users prefer browsing from their smartphones.

One of the biggest challenges that people face when trying to make a mobile-friendly website is how to make the responsive embedded YouTube videos and embedded iFrames for their website.

There are many free and premium scripts available on the internet which can do this work for you. But I highly discourage you to use any such scripts or plugins for making responsive videos. And I have a very strong reason for doing so. While these scripts solve your problem they actually add an unnecessary overhead for the website load time and consume more resources.

Make Responsive embedded videos and iFrames

I am sharing with you this simple and evergreen method to make any iFrame responsive. Embedded YouTube videos are also iFrames and so this method works for all such videos and iFrames to be used on your website. All that we use is just a plain and simple CSS hack.

You can use this trick to make responsive bootstrap videos and responsive iFrames. You can see the LIVE DEMO of this script in working.

This is how you would add an embedded video iFrame in your website.

<iframe src="https://www.youtube.com/embed/DRmst4lmoXw" height="315" width="560" allowfullscreen="" frameborder="0" ></iframe>

STEP 1: Wrap the video iFrame within a <div> element and assign a class to it. We are using the class 'responsive-video' in our example.

<div class="responsive-video">
    <iframe src="https://www.youtube.com/embed/DRmst4lmoXw" height="315" width="560" allowfullscreen="" frameborder="0" ></iframe>
</div>

STEP 2: Now assign the following CSS properties to the class which we used for the wrapper <div> element.

.responsive-video{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.responsive-video iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

Make HTML5 and bootstrap videos responsive

The process of make a responsive HTML5 video is even simpler and easier. The HTML5 and bootstrap videos are those which are added to the website page using the <video> tag instead of using an iFrame.

This is how you would add an HTML5 video in your website.

<video controls="" width="400">
    <source src="mov_bbb.mp4" type="video/mp4"></source>
    <source src="mov_bbb.ogg" type="video/ogg"></source>
    Your browser does not support HTML5 video.
</video>

Considering that the above-mentioned code is for the HTML5 video on your website, follow this step. Add the following CSS properties which will target all the <video> tags across your entire website and turn them into responsive videos.

video {
    width: 100%;
    height: auto;
}

I am positive that this guide was helpful to you. What other challenges do you face when designing a responsive website? Being a professional web designer with expertise in responsive web designs, I will be happy to provide a solution to your problems.

Breaking News