Responsive Vimeo Video Embed

Sometimes setting the width of an iframe to 100% is not enough. There are instances that you’ll get a black bar above and below your video on smaller screen resolution. You get the full width that fits the screen but you can’t have a full 100% height. To fix this, I will share my full CSS code to make a responsive Vimeo video.

Your HTML should look like this. Make sure to replace your own iframe code from vimeo.

<div class="wrappervid">
<iframe width="500" height="281" src="https://player.vimeo.com/video/153689893?title=0&amp;byline=0&amp;portrait=0" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>

And your CSS will be:

.wrappervid {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0; /* you can change this value if you have issues */
    height: 0;
}
.wrappervid iframe {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

 

Here’s the final result. You can resize this window to see it in action.

*Some links may contain affiliate links. I may get small commission from your purchases to fund this website and to avoid annoying ads.