Making a YouTube Video Responsive

The following steps should be taken when embedding a YouTube video to a page and ensuring it is responsive on all screen sizes.

1) Add a "div" wrapper with a class around the iframe. Make sure you remove any width and height styling from the iframe.



Add the class class="responsive-iframe" to the source code of the video after <div> where responsive-iframe is the CSS class name that will be set up on step 2.

<div class="responsive-iframe">

2) Add some custom CSS

Example CSS:

.responsive-iframe {  
 position:relative;
   padding-bottom:56.25%;
   padding-top:30px;
   height:0;
   overflow:hidden;
}

.responsive-iframe iframe, .responsive-iframe object, .responsive-iframe embed {
position:absolute;
top:0; 
left:0; 
width:100%; 
height:100%;
}

Updated on: 31/08/2023