How to make video responsive in your website

Every Designer/Developer have question that ‘How to make video responsive in your website?’

If you remain in the process of constructing a responsive web site or looking to add video clip to an already receptive web site, below is a quick overview on the best ways to make certain your video clips resize as effortlessly as the remainder of your website.

With HTML5 video clip component, you could easily make it flexible by using the max-width:100 % method. As discussed in the intro, this method doesn’t work if the installed code makes use of iframe or things tag which is typically used by most video clip discussing sites such as YouTube as well as Vimeo.

The Issue

Why do images resize fluidly and maintain their facet proportion in receptive formats when videos utilizing iframe or item embed codes do not? Because images have a defined size and also height, browsers are able to compute, and keep, their aspect ratio when resizing them. Iframe and things components, on the other hand, have no native width and height that a web browser can use to calculate an aspect proportion. This could result in some aggravating actions when installing a video clip in a responsive layout.

The Solution

The solution to this problem is to inform the web browser what the proper element ratio should be for the video in the iframe or item aspect. By doing this, the internet browser will certainly have the ability to keep that aspect ratio when resizing the video in a receptive design.


Just how it functions

To set up this “innate proportion” you just have to produce a box with the appropriate facet proportion, put the embedded video clip because box, and also have it stretch to suit that box.

The padding-bottom css building is exactly what allows us to specify the aspect proportion for the box where the video clip will certainly be put. By setting the padding-bottom equipment to a percentage of the width of the including element, we have the ability to create an inherent aspect proportion for that box.

Once the aspect ratio is established, we simply have to set our video installed code to occupy the complete width and also height of the box we just developed.

How to Create Fixed Width

To restrict the width of the video, an additional div wrapper is required. Wrap the video with another div tag and specify a fixed width value with max-width:100%. This code will work for all browser, so that the full code look like –

Full Code Demo

Want to make your video autoplay, mute? checkout my post – Autoplay, Mute and Hide Elements in Youtube Iframe