A complete guide to add responsive YouTube videos using HTML and CSS

Video makes the website represent another aspect of your overall website. Till many years we just used pure HTML videos that was uploaded to a folder on server and then we just add the path of the video into the HTML and it worked perfectly fine.

Things have changed in last decade so fast and hosting all those large sized videos is hard, especially when you don’t have enough server space and when the server is not fully optimized for large files.

Apart from that there are different video formats and qualities as well. To manage those as well on your own server can be really tricky.

YouTube, Vimeo and other video streaming services make it really easy for us to upload a video on their server and then just copy that video’s link to our website and it simply works on our website.

Here’s how to do that.

YouTube has an 11 digit id specified for all videos. We can make use of that ID and display any video on any website.

How to find YouTube video ID?

1. On YouTube, find the video that you want to add to your website or webpage.
2. Most publically available videos have a Share button right under the video. Click on that “Share” button.
3. You’ll see a short YouTube link/URL. Something like https://youtu.be/yogesh12345
4. The 11 characters at the end of the URL is the YouTube video ID.

How to add YouTube video using just HTML?

We can make use of iframe tags to insert a video into the webpage.

The src is the main tag we need to be careful about. Make sure you have the correct video ID.

Use this format “https://www.youtube.com/embed/your-video-id” to add the video.

We can specify the width and height we want for the video as well. Just like this example:

<iframe loading="lazy" 
  width="300" 
  height="200" 
  src="https://www.youtube.com/embed/_NGQfFCFUn4">
</iframe>

This is how it will look like on your website.

You can always change the height and width for the video.

If you use the YouTube video link directly in iframe then it might not work. Use the embedded URL.

Can I just copy and paste the code rather than writing it down?

Yes you can!

YouTube provides iframe code directly from the video page.

Follow these steps:

1. On YouTube, find the video that you want to add to your website or webpage.
2. Most publically available videos have a Share button right under the video. Click on that “Share” button.
3. You’ll the first button “Embed”. Click on it.
4. Now you have all the freedom to modify the height and width and other attributes or even start the video after certain minutes/seconds.
5. After you’re done, copy and paste that code into your website and it will work like a charm!

How to autoplay and mute embedded YouTube videos?

Youtube provides controls to do so.

Autoplay is when you start playing the video automatically when someone visits the webpage. You can simple do that by attaching “autoplay=1” at the end of the embedded YouTube URL.

Be careful while autoplaying the videos. Not everyone likes it!

Nowadays, many top browsers do not allow auto playing with a sound at all. Although they still allow autoplay without a sound (muted autoplay).

This is how you can add autoplay with mute. Just simply attach “?autoplay=1&mute=1” right after the embedded video.

<iframe loading="lazy" 
  width="300" 
  height="200" 
  src="https://www.youtube.com/embed/_NGQfFCFUn4?autoplay=1&#038;mute=1">
</iframe>

How to hide controls in the embedded YouTube video?

We can use controls=0 to hide the controls. By default the controls is set as 1.

<iframe loading="lazy" 
  width="300" 
  height="200" 
  src="https://www.youtube.com/embed/_NGQfFCFUn4?controls=0">
</iframe>

How to play the embedded YouTube video in a loop?

You can simple add “loop=1” to play the embedded video in a loop. The default is 0 that means the video will be played only once unless user starts the video again.

<iframe loading="lazy" 
  width="300" 
  height="200" src="https://www.youtube.com/embed/_NGQfFCFUn4? 
  autoplay=1&#038;mute=1&#038;loop=1">
</iframe>

Can I embed a playlist instead of just one video?

Yes you can!

YouTube doesn’t provide embedded code for the playlist.

But we can always create the code and add it to our website.

Let’s keep the same YouTube video we used in the previous example and add it’s playlist.

To add a playlist, you need to grab the list ID from the URL. For e.g. the video we added earlier has a list ID = PLjp0AEEJ0-fHnYwRI5bY_ZiXclmVWZZJx

We need to combine the video ID and list ID in order to get the playlist.

Make sure you add the loop=1 while adding a list. That will keep playing the list until the user pauses it.

This is how you can add the code:

<iframe loading="lazy" 
  width="300" 
  height="200" 
  src="https://www.youtube.com/embed/_NGQfFCFUn4? 
  loop=1&#038;list=PLjp0AEEJ0-fHnYwRI5bY_ZiXclmVWZZJx">
</iframe>

How to make videos responsive?

Add the container around the iframe tag.

<div class="embed-container">
  <iframe loading="lazy" 
    width="300" 
    height="200" 
    src="https://www.youtube.com/embed/_NGQfFCFUn4">
  </iframe>
</div>

Now add style to make the container and its contents responsive.

.embed-container {
  position      : relative;
  padding-bottom: 56.25%;
  overflow      : hidden;
  max-width     : 100%;
  height        : auto;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top     : 0;
  left    : 0;
  width   : 100%;
  height  : 100%;
}

Credit for responsive style goes to: embedresponsively.com

Share this post