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.

Iframe embed.png

 

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

}

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.