Responsive Video Embed

| Ngoc Nguyen

The normal method of embedding videos into your 'responsive site' will break the responsiveness because the videos themselves won't resize correctly. In order to get responsive video working, you can use one of the methods below to embed videos from Youtube, Vimeo, etc. into your website.

Responsive Video – Integrating with FitVids.js

Chris Coyier from CSS-Tricks has developed a great javascript plugin that stretches the video to the full width of the container. You can download the plugin from http://fitvidsjs.com/. You can view the full video screencast on the fitvids method at CSS-Tricks.com


	// Basic FitVids
	$(".entry-content").fitVids();

In the code above, I am calling the fitVids() function on all video content within the ‘entry-content’ class container and just like that your videos will be responsive.

Responsive Video – CSS Method

The above method will not work on devices without JavaScript support so I needed a fallback method. I stumbled upon this gem from Web Designer Wall


<div class="video-container">
	<iframe width="640" height="360" src="https://www.youtube.com/embed/Us-TVg40ExM?feature=player_embedded" frameborder="0" allowfullscreen></iframe>
</div>



.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%;
}

By wrapping the iframe code inside of a video-container class, I am using CSS to force the video to be responsive. With both methods written into your site, you are all set for responsive videos.

Conclusion

Here is an embedded video from Youtube to showcase responsive videos. When you resize the window, the video will automatically resize to fit within the container.

See

Listen