Add Responsive YouTube and Vimeo Videos to Any Website
YouTube, Vimeo and other video hosts make it easy to embed their players in your own website.
However, Youtube, Vimeo and others don’t provide responsive videos by default.
In this short tutorial, we’ll show you how to make YouTube, Vimeo and other videos responsive in your website, using just a few lines of CSS.
If you’re using WordPress, we highly recommend you check out the EmbedPress plugin. You can create responsive YouTube and Facebook video embeds, using just the URL.
Step #1. Get the YouTube Embed Code
- Go to Youtube.
- Find the video you want to use on your website.
- Click on Share >> Embed >> Right click and copy the HTML code.
Step #2. Use the Embed Code
Paste this embed code in your website. It will look similar to this:
{codecitation}
<iframe width="420" height="315" src="http://www.youtube.com/embed/6xisazZX9bA" frameborder="0" allowfullscreen></iframe>
{/codecitation}Step #3. Modify the Embed Code
Add a div tag around the embed code. Use the CSS class video-responsive so that your code now looks like this:
{codecitation}<div class="video-responsive">
<iframe width="420" height="315" src="http://www.youtube.com/embed/6xisazZX9bA" frameborder="0" allowfullscreen></iframe>
</div>{/codecitation}Step #4. Add the CSS
Now add some CSS properties inside one of your stylesheet files:
{codecitation}.video-responsive{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.video-responsive iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}{/codecitation}Your videos now will be responsive. Try resizing your browser to see it in action.
This same process works for Vimeo videos and any other service that uses an iframe tag.
Hi Valentin Garcia,
How do you think the AllVideos plugin for Joomla? Or any other recommended plugin?
Hi ZomiDaily!
You mean a Joomla plugin for videos that supports responsive? – if that is the case, check this one: [url=http://www.joomlabamboo.com/joomla-extensions/fitvids-responsive-video-for-joomla]http://www.joomlabamboo.com…[/url]
Newer versions include a “responsive” template. You have to choose it in plugin parameters.
Yes, I’m using AllVideos for all my Joomla site, and it is nicely responsive. Cheers!
Valentin, this is fantastic! First, I tried it on my site and it didn’t work. I realized then that, minor detail, my template was not responsive. I tested on a site with a responsive template and checked it on my iphone. Vertically, the vid was cropped left and right, but when I turned the phone horizontal, it was perfect. Anyone watching a vid on a smart phone with turn it sideways, so this is GREAT. Thanks so much.
Hi Hope!
I’m glad this tutorial was helpful for you 🙂
Definitely! I just shared it on my blog and facebook.
This is nice. We like to have the option to watch the video by clicking a
button ‘Watch Clip” Can this be done using this code and css?
Hi Thomas!
With CSS is possible add text using the content property, but I may need more details to have a clear idea of your suggestion.
Hi Valentin
Very helpful
I have one question – the video we added stretches to the full width of the outer containing element of our template.
if you look on this page you will see what I mean
[url=http://www.asafeworldforwomen.org/appeals/donate-cofapri.html?view=donation]http://www.asafeworldforwom…[/url]
How do we make sure the video size is not increased to the full size of the page?
This is caused by having the 100% height and width set on the class “video-container iframe, .video-container object, .video-container embed, .video-container video”
If that is reduced to to a smaller % the responsiveness is lost on mobile.
Any thoughts?
Amazing, well done.
Thanks for the tip, Valentin!
best explanation I have found so far easy to understand
I cant believe some one made this so easy, I literally copy/paste this and it worked, thanks
Thanks man, used it and it works. Happy to learn from you!
How do you put wording on the left and have a responsive video on the right?
it works fine. thank you so much. very simple , very useful ))
Is it possible to set the responsive video with a max width display of 500px?
Thanks it works, my you tube video become responsive as I want it to be
Awesome. You are a Godsend. I’ve been editing and adapting my blog. This was my last hurdle.
This was great, really useful!
Hi.. Please guide me where to paste first css codes. i’m new to joomla.. tried it in home.css but didnt worked. thanks in advance.
Hi,
I found that I had to remove the width=”420″ height=”315″ from the iframe embed code to get it to work.
I was having some difficulties and this worked perfectly for me! Thanks a lot!
We’re happy to help, @vanessadds
Have a good day.
Perfect! Just what I needed to display some Vimeo videos.
Absolutely working well, you save my day!
Glad to hear that our article helped you to achieve what you were looking for
How can i use this only for mobile ? my site is responsive and i want to use for a video for the mobile version only
You should used media queries and target “video-responsive” CSS class only for a specific screen resolutions
How can i use this only for mobile? my site is responsive and i want to use for a video for the mobile version only
Hi Valentin, I have tried your code, but now my youtube player on my site will not show the play and pause button underneath, can you please help?
Hi Aryasesa Nugrahua Latuihamallo
check if other CSS is causing that behavior and or you added YouTube parameters that may disable those buttons.
Regards
Thanks!
I’m also trying to put one Youtube and one Vimeo side to side (and then 100% width one over the other at 500px and smaller) and I can’t… could you please help me?
Jobs-a-goodun’ worked a treat x
First I built my own media queries for every conceivable size of video that would fit my adaptive site’s main content container. Tedious, but fine. THEN I needed to put video somewhere else IN DIFFERENT SIZES and almost had to do it all over again, but divided by 2.5 to fit in the new space. Your solution is so elegant that I can scrap all those media queries and just use it instead. Thanks for reducing not only the work I had to do, but also the overall size of my page! Very slick.
The ‘height:0’ was collapsing for me on Firefox (Mac OS 55.0.3 (64-bit)). Adding ‘display:table’ to the .video-responsive fixed it for me.
This helped a lot thank you! However, for those of us that are complete noobs with HTML, you might add in where the CSS style sheet is at to add the 2nd part of the code. I had to go to a YouTube video on another page to figure that out, but I still copy and pasted your code, and it worked. I didn’t build the pages I’m working in, I’m just adding stuff in the code.
Could be more interesting to describe every CSS line and its purpose. Specially that bottom padding. I can figure out that percentage of 56.25% is a result of 100% divided by the 16/9 wide screen’s aspect ratio (100 / 1.77778).
Thank you. The only issue I had was with regards to the amount of white space that appeared before my image. The way I got around it was to apply the responsive to Tablets and Phones only and not bother with defining it in my CSS for desktop or larger viewers.
Thanks, Its easy to use and perfect response.
Thanks!
I’m also trying to put one Youtube and one Vimeo side to side (and then 100% width one over the other at 500px and smaller) and I can’t… could you please help me?
Excellent, this works tutorial performs pertfectly Dreamweaver CS6.
Thanks this rocks!
Gracias Valentin!!
Still works – thank you!
With this approach you will end up with letterboxing (black lines on the sides of the container). A better approach is to change the height of the container using javascript.
Many thank you! It’s working! ^^
wow, that’s fantastic all with no plugin. thx.
Thank you so much Valentin for this incredibly helpful advice. I have implemented this within Teachable on a couple of videos where I wanted to show video content from YouTube and it works like a dream. I’ve bookmarked this for future reference. Great job.
Thanks Valentin! I don’t usually leave comments; but, I was looking for a solution. I went through several sites/posts before finding yours. It is so clear, laid out step by step. It was easy to follow. I have just added the
This is very helpful, thank you. For me it was also useful to add yet another
Hi Valentin! Thank you for the straightforward response!
I am having trouble with it though…I wonder if I am putting the CSS in the right place? Is there any easy way to describe where it should go?
Thank you 🙂
Awesome and simple.
How do you control the container size of the youtube video?
Thanks Dude. It may be old but it still works.
I don’t have access to the CSS code on my website – it’s controlled by admins and it’s difficult to get them to be “responsive.” Is there a way to add this CSS file to my html code on the page I’m working on inside a content management system system?
Works like a charm!
Excellent!! Thank you!
I work with an outside vendor and cant add css to the site easily, but was able to add the styling inline and worked like a charm!! Just don’t forget to add the styling to the iframe code as well!
[code]
[code] [/code]
[code]
[/code]
Thank you so much.
Has been helpful.
This might be another level of complexity, but how would you size the video so it fits the window size when the site first loads as the video size it overflowing the height?
Hi Valentin,
Vimeo videos stretch to the full length of the page. Is there a fix for this? Thank you so much.
Thanks for the tip! It worked like a charm.
J
The info you provided works great. However, how do I center the re-sized video on the page. I tried the