Best Practices: Creating Fluid Width Videos the Sane Way →

Jan 23, 2017 | 1 min read | CSS, HTML

While creating the site used to document my paternity leave, I needed to embed a video on how to roast duck breast in the oven. Embedding a video from YouTube is easy, but Google has specified both its width and height in the embed snippet. This was good enough 10 years ago, but not today with all our fancy responsive web design.

The linked post has many solutions for embedding video with a responsive width based on the users current viewport. I use the method below and it works perfectly.

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

<div class="videoWrapper">
    <!-- Copy & pasted from YouTube -->
    <iframe width="854" height="480" src="https://www.youtube.com/embed/qAfmfCArUgA" frameborder="0" allowfullscreen></iframe>
</div>