How to make YouTube videos scale in all browsers, tablets and phones for responsive design?

24 Nov 2016 by Ravi Sah

Youtube

Hello guys all you need to do for scale a YouTube video to fit any browser, tablet or mobile device for responsive design is to use a simple CSS solution.

Step 1

The first thing that you need is the YouTube iframe embed code, grab that in your video share options from the YouTube site and place the iframe code on your web page. See below how it looks like...


<iframe width="520" height="315" src="https://www.youtube.com/embed/XGSy3_Czz8k"></iframe>

And yes please remove height and width from the iframe. Now we need to add in a HTML container around the video and declare the CSS.

Step 2

Now set Up the HTML and CSS Styles, Create a container div around the iframe code and give it a class see below...


<div class="video-container"><iframe.......></iframe></div>

Now add css for that...


<style type="text/css">
.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
</style>

First CSS declarations target the video container and the second target what is in the container, in this case it's the iframe, you can also apply this to objects and embed elements.

You are done the video will now scale as the viewport is resized. Thanks Hope you will like it.