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.

And your CSS will be:

 

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