How to Embed Responsive YouTube Video in the Website

Putting YouTube videos on websites is common nowadays. YouTube provides an iframe code to embed the video on websites. However, the video rendered through this iframe code is not responsive. It means on small devices like mobile, tablet your video may not look nice.

Actually, your embedded YouTube videos must be responsive for a better user experience. In this article, we study how to embed responsive YouTube videos on your website.

I found 3 possible ways of achieving our end result. Let’s see it one by one.

Embed Responsive YouTube Video Using Bootstrap

Bootstrap is the most popular front-end tool which helps to develop responsive sites. It also provides an easy solution to make your YouTube video responsive.

To get started, you first need to include the CSS file of Bootstrap as follows. If you are already using Bootstrap in your project then skip this step.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />

Next, use the following HTML to embed your video using a Bootstrap.

<div class="container">
    <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/VIDEO_ID?rel=0" allowfullscreen></iframe>
    </div>
</div>

Replace the placeholder VIDEO_ID with the actual video id. Try it and you should see your video is working fine on smaller devices.

You may read about this embedding method on Bootstrap documentation.

Responsive YouTube Video Using Fancybox

This option is a little bit different. Here instead of displaying video directly, we display a thumbnail of YouTube video. And then clicking on a thumbnail, your video will start playing in the pop-up. This can be done using a fancybox.

In order to use Fancybox, you need to include the following CSS and JS files to your website.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

After this, place the code below and you are done.

<a data-fancybox="" href="https://www.youtube.com/watch?v=VIDEO_ID">
    <img src="http://i3.ytimg.com/vi/VIDEO_ID/hqdefault.jpg" />
</a>

Lite YouTube Embeds

In the first method, we have used iframe code. While using an iframe, the browser has to download nearly 800kB of data to render a video.

Using fancybox, you can reduce this load. But again you have to include their CSS and JS. Adding these files through CDN is recommended to free up server load.

While working on this topic, I came across an article that explains embedding YouTube videos in a different manner. It neither needs to use an iframe on page load nor needs to include any files.

The article provides code that anyone can easily add to their application. Please follow the Lite YouTube Embeds article and adds the code as suggested.

These are the 3 possible ways of embedding a responsive YouTube video. Depending on your requirements, you can pick any of the solutions.

Related Articles

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.

Leave a Reply

Your email address will not be published. Required fields are marked *