Home » Blog » Cybersecurity » Cybersecurity » How to make responsive YouTube videos for all browsers and mobile devices
responsive YouTube videos

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 YouTube videos

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

Sean Doyle

Sean is a tech author and engineer with over 20 years of experience in cybersecurity, privacy, malware, Google Analytics, online marketing, and other topics. He is featured in several publications.

More Reading

Post navigation

Leave a Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

How to make mobile-friendly images using CSS

How To Remove Or Style The Happy Face In The WordPress Footer

How To Hide Or Remove WordPress Page And Post Titles With CSS