How to Embed a YouTube or Vimeo Video Responsively and Make it Work on All Kinds of Browsers

Disclosure: We might receive commission on purchases made through links on this page. Learn more >

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&amp;modestbranding=1&amp;rel=0&amp;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?

First, make sure you correctly copied and pasted the CSS code and the HTML embed code. Also, ensure that you correctly replaced the example video ID with the ID of the video you want to embed. If everything seems correct, but the video still isn't displaying as expected, there might be conflicts with your existing CSS or JavaScript. Review your site's code for any potential conflicts.

I am using a different CMS other than WordPress, Joomla, or Drupal. Will this method still work?

Yes, the concept remains the same across different CMS platforms. However, the exact steps might differ depending on your CMS. The key point is to update your CSS file and to insert the HTML code in your content. If you're unsure about how to do this in your specific CMS, consider seeking help from your CMS's support or community forum.

How can I change the aspect ratio of the video?

The aspect ratio of the video is controlled by the 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 %.
Unlock solo business potentialbusiness growthcontinuous improvementfreedom to own your story
We will be happy to hear your thoughts

Leave a Comment

BizStack — Entrepreneur’s Business Stack
Logo