Make YouTube video responsive with CSS (+Vimeo) 💥

Updated: April 8, 2024 | by: Martijn Assie, creating websites & shops since 20 years, also Linux-, Wordpress-,
Photoshop- and SEO expert. | NL DE

Make Vimeo and Youtube video responsive

You can solve this problem with both CSS and Javascript. CSS is a lot easier, so that's how we're going to do it. Vimeo or Youtube makes no difference, you can apply this to all videos.

Make video responsive with CSS

To get started, retrieve the Vimeo or Youtube iframe embed code on the page of the Vimeo/Youtube video and place it on your site. You create a div around it in such a way that it will look like the one below.

<div class="video-container"><iframe>.................</iframe></div>

You can remove height and width from the Youtube code if you want, but you can also leave it as it is. Add the following to your css:

.video-container {
	position:relative;
	padding-bottom:56.25%;
	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%;
}

The upper part focuses on the video container and the lower part on what is in the container. In this case it is the iframe but you can also use this code with objects and embed elements.

There is no more work to do. You see, making a YouTube or Vimeo video responsive with CSS is easy. Your video is now perfectly displayed in all browsers on PC, laptop, tablet and mobile.