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, or 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 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 in Bootstrap documentation.

Responsive YouTube Video Using Fancybox

This option is a little bit different. Here instead of displaying the video directly, we display a thumbnail of the 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 on 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 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 the 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

• How to Get List of YouTube Videos of Your Channel
• How to Use YouTube API to Upload Video on YouTube Channel
• How to Get YouTube Video Tags Using YouTube API

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