fbpx
Supercharge your SEO! subscribe to our newsletter For the latest SEO tactics & best practices

Responsive Video Wrapper in CSS and HTML

By
Updated March 15, 2016
No Comments
5

Responsive Video Wrapper in CSS and HTML


Tim Brown

Tim Brown is the owner of Hook Agency, and strategic marketer focused primarily on driving traffic and leads for small businesses and construction companies.

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:

 

  •  
  •  
  •  
  •  

Related Posts


Tim Brown

Tim Brown is the owner of Hook Agency, and strategic marketer focused primarily on driving traffic and leads for small businesses and construction companies.

Free Marketing Audiobook

Leave a Reply

Be the First to Comment!

Notify of
avatar

Ready to Get Started?

Get a free consultation now