Loading...

Contact

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

24 Nov 2016 by Ravi Sah
Share Blog Post

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.

Share Blog Post
Ravi Sah

Ravi Sah

Creative Website Designer

Post Blog Comments

Recent Post

View my food journey on Zomato!

Ready to discuss your project?

Close Free Consuting Form
Responsivness

Free Consultant

100% Privacy. I never share your details.

Close Free Consuting Form

Project Detail