How to make YouTube or Vimeo Videos Responsive on your site

YouTube, Vimeo and other video hosts make it easy to embed videos on your website and blog using frames, however there isn’t a responsive option and editing iframes is near impossible. This tutorial will show you how to make YouTube and Vimeo videos responsive on your site.

Responsive YouTube and Vimeo Videos

1. Find the video you want to use. On YouTube and Vimeo, click on Share > Embed and copy the code.

2. Paste the embed code into a page or post on your blog, it will look similar to this

<iframe width="560" height="315" src="https://www.youtube.com/embed/1NxqusBMSjo" frameborder="0" allowfullscreen></iframe>

3. Wrap a div tag around the iframe, so it looks something like this

<div class="videoresp">
<iframe width="560" height="315" src="https://www.youtube.com/embed/1NxqusBMSjo" frameborder="0" allowfullscreen></iframe>
</div>

4. We’ll now use the div class to add CSS. If you’re on Blogger, go to Template > Edit HTML and add it above ]]></b:skin>. On WordPress, add it to your themes stylesheet.

/* Start XOMISSE Responsive Video */
.videoresp {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	overflow: hidden;
	max-width: 100%;
	height: auto;
	margin: 20px auto;
}
.videoresp iframe, .videoresp object, .videoresp embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/* End XOMISSE Responsive Video */

5. Try resizing your browser, your videos should be responsive.