Apollo Solution Services


Online Tools


PC Tools


Website Coding


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>  

B - Add the CSS to your website

 .video-container {  
 .video-container iframe, .video-container object, .video-container embed {  

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