Apollo Solution Services

[Apollo][grids]

Online Tools

[Tools][twocolumns]

PC Tools

[PC-Tools][twocolumns]

Website Coding

[Coding][twocolumns]

Making YouTube videos scale in all devices for a responsive design


Making YouTube videos scale in all browsers, tablets and phones for responsive design. Works great for all CMS (Blogger, WordPress and more) and also HTML websites.

To scale a YouTube video to fit any browser or tablet/mobile device for responsive design you can use either a CSS or Javascript solution to accomplish the goal. This example uses a CSS solution, you need to add a couple of CSS styles in your main CSS file.

The Process

1 - Get the YouTube i-frame embed code, grab that in share/embed options from YouTube site.

2 - Place the i-frame code on your page.

3 - From here we need to add in a HTML container around the video and declare the CSS.

4 - Set up the HTML and CSS styles

A - Create a container div around the YouTube iframe code and give it a class as shown.

 <div class="video-container">  
 <insert your youtube iframe code here>  
 </iframe></div>  

B - Add the CSS to your website

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

Tha's it. Try it on simple post or webpage and see it work.