How to make responsive YouTube videos for all browsers and mobile devices

The guide on this webpage will show you how to make your embedded YouTube videos responsive on all web browsers, tablets, and phones using simple CSS.

Responsive web design is very important. Ever since Google updated a new algorithm that ranks mobile-friendly websites higher on their search results pages web developers and website owners have been searching for new methods to ensure their web content properly displays on a mobile device or tablet. The CSS code on this webpage will help you make your YouTube videos responsive on all internet browsers and mobile-friendly. If the YouTube videos you embded on your website bleed out to the side or do not appear properly on your website this CSS code can be used to fix that.

1. Open your CSS.style sheet or custom CSS style page.

2. Copy and paste this code into your website’s apprioate CSS style sheet:

.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%;
}

3. Get your YouTube <iframe> embed code and place the YouTube video <iframe> code onto your website.

4. Add this HTML container around the YouTube video’s <iframe></iframe> code:

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

*Replace <iframe>YourYouTubeVideo</iframe> with your YouTube video embed code.

How this code works

The first .video-container CSS declarations target the video container and the second target what is inside the <div></div> tag container. This allows the embedded YouTube video to scale and re-size. The special element is the padding-bottom rule of 56.25%, this figure is achieved by using the video’s aspect ratio of 16*9, so 9 divided by 16 = 0.5625 or 56.25%.