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

Post last updated:

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!

Join over 1,000 creators and small biz owners and be part of The Roundup

Ready to build your website, grow your audience and monetise your platforms? Receive the latest WordPress news, social media updates, SEO tips and industry insights straight to your inbox.

By signing up you’ll receive our fortnightly newsletter and free resources. No spam or unnecessary emails. You can unsubscribe at any time.