Responsive Video Wrapper in CSS and HTML

5

by on March 15, 2016

Responsive Video Wrapper in CSS and HTML

  •  
  •  
  •  
  •  

One code snippet I use all of the time is a responsive video wrapper. By default a Youtube video embed, or most types of iframe embeds are not responsive out of the gate. You only need a little bit of code to make a YouTube video responsive.

The HTML


<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/EYt4tEnVSjA" frameborder="0" allowfullscreen></iframe>
</div>

So obviously, replace the video with the video embed code from the ’embed’ tab of Youtube, or the embed code from the video player you’re using. This code will work with any kind of iframe, and the key would be adjusting and tweaking some of the CSS elements below to get the right balance. Out of the box this will work though!

 

The CSS:


.video-container {
    position: relative;
    padding-bottom: 52%;
    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%;
}
@media screen and (max-width: 700px){
	.video-container {
    position: relative;
    padding-bottom: 47%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
}

 

This works great, but the video has a black bar above and below. How can I eliminate the top and bottom black bars so that the video cleanly fills in the entire video container?

The key thing you might want to mess with for your specific scenario is the ‘padding-bottom.’ If the video frame isn’t quite filling out the video box vertically you’d want to decrease that number (for instance try 45%), and if it’s leaving too much space on the right and left side you’d want to increase that number (try 55%.)

Things this snippet can help you make a lot of things that use iframes responsive:

  • Make Soundcloud embed responsive
  • Make Google Maps embed responsive
  • Make Vimeo embed responsive

Responsive Video Example:

 


  •  
  •  
  •  
  •  
Free Marketing Audiobook

Leave a Reply

Be the First to Comment!

Notify of
avatar

Ready to get started?

Get a free consultation now