How to Embed a YouTube or Vimeo Video Responsively and Make it Work on All Kinds of Browsers
Embedded videos are a valuable addition to any website, as they can provide engaging and dynamic content that keeps your audience entertained and informed. However, if you’ve ever tried to embed a YouTube or Vimeo video on your site, you might have encountered compatibility issues across different browsers. But don’t worry! This article will guide you on how to embed a YouTube or Vimeo video and make it work on all kinds of browsers. We’ll also show you how to do this on the most used Content Management Systems (CMS), like WordPress.
Step 1: Update Your CSS
To start, you need to set up a responsive video embed container. This is a CSS trick that ensures your embedded videos remain responsive, irrespective of the screen size or resolution of the device. This CSS code snippet should be added to your website’s CSS file:
/* Responsive Video Embed Container */
.video-container {
position: relative;
padding-bottom: min(56.25%, 380px);
height: 0;
overflow: hidden;
max-width: 640px;
}
.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
This code ensures that the aspect ratio of your video remains at 16:9, suitable for most YouTube and Vimeo videos, and that the video will resize proportionally with the width of the container element, i.e. where the video is embedded.
Step 2: Embed the Video
After your CSS is ready, it’s time to embed the video. Here’s how to embed a YouTube video:
<div class="video-container"> <iframe src="https://www.youtube.com/embed/WZ3jlTptwTo?cc_load_policy=3&modestbranding=1&rel=0&iv_load_policy=3" frameborder="0" allowfullscreen=""></iframe> </div>
In the above HTML snippet, kdVxXrX2qxA is the ID of the example video. Replace it with the ID of the video you wish to embed. The YouTube video ID can be found in the video URL after v=. For example, in the YouTube URL https://www.youtube.com/watch?v=WZ3jlTptwTo, the video ID is WZ3jlTptwTo.
And here’s how to embed a Vimeo video:
<div class='video-container'><iframe src='https://player.vimeo.com/video/61529500' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
Again, replace 61529500 with the ID of the video, you want to embed. The Vimeo video ID is the numeric part of the video page URL. For instance, in the Vimeo URL https://vimeo.com/61529500, the video ID is 61529500.
This is how it looks when we embed the YouTube video:
And this is how a Vimeo Embed looks:
You can check this page on both mobile, desktop, and tablet screens, and see that the videos fit properly to the screen.
P.S. The embeds can be seen as small when you’re editing the page/post, but you’ll see them full width once you preview the actual page/post.
How to Apply These Changes on WordPress
WordPress has a simple process to add CSS and HTML to your site. To update CSS, go to Appearance -> Customize -> Additional CSS in the WordPress dashboard, and paste the CSS code in the provided box.
To embed the video, you can insert the HTML code directly in the content area of your page or post editor. Just switch to the Text/HTML editor, then paste the HTML code where you want the video to appear.
How to Apply These Changes on Other CMS Platforms
The process of adding CSS and HTML might vary slightly between different CMS platforms, but the general idea is the same.
For CMS platforms like Joomla, you can add the CSS code to your custom.css file(or equivalent), typically found in your site’s template folder. To embed the video, switch to the HTML mode in your article editor and paste the HTML code.
In Drupal, you can add the CSS code to your theme’s .css file, usually located in the themes directory. For embedding the video, switch to the Full HTML text format and paste the HTML code in your content area.
Remember, the most crucial part is the video ID. Make sure to replace the example video ID with the ID of the video you want to embed. That’s it! Now, you can seamlessly embed YouTube or Vimeo videos that work perfectly across all browsers, thus enhancing the user experience on your site.
Frequently Asked Questions
I followed the steps but my video is not displaying correctly. What could be the issue?
I am using a different CMS other than WordPress, Joomla, or Drupal. Will this method still work?
How can I change the aspect ratio of the video?
padding-bottom value in the CSS code. In the provided code, we've set padding-bottom: 56.25%; to create a 16:9 aspect ratio, which is common for most YouTube and Vimeo videos. This padding-bottom value is calculated by this formula:
Video Aspect Ratio to padding-bottom calculation: %100 * 9/16 = 56.25 %If your video has a different aspect ratio, you will need to adjust this value accordingly. For example, for a 4:3 video, you would use
padding-bottom: 75%; which is calculated as %100 * 3/4 = 75 %.
I’m founder of BizStack at Cagri Sarigoz LLC and a passionate advocate for entrepreneurs.
With over 14 years in tech, marketing, and AI, including my role as Head of SEO at CitizenShipper and co-founder of TaleBot at Intale AI, I’m dedicated to sharing genuine, useful product insights and tips.
At BizStack, I aim to cut through the digital noise to provide clear, actionable advice.
And more than all else, I’m a father to a (always) little girl and a husband.
Contact me at [email protected] for assistance.
