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.

responsive youtube and vimeo videos

Join over 1,000 creators starting, building and growing their online business

Making marketing more manageable (even with limited time, money and know-how) with the latest strategies, insights and updates delivered to straight to your inbox.

    By signing up you’ll receive The Roundup newsletter and additional resources. No spam or unnecessary emails. You can unsubscribe at any time.

    5 responses to “How to make YouTube or Vimeo Videos Responsive on your site”

    1. I’m having a hard time finding the b:skin. Is this in the blogger template? Or is this done in each individual post?

      1. Hey Jenni. Yes in the Blogger Template (Template > Edit HTML), this post will help you find the CSS section.

        1. Awesome! Thanks!

    2. This is just great, thanks alot xomisse!