HTML Youtube

Prev
Next

HTML Youtube

The best way to use a video on your website is by using YouTube videos.

The advantage of using YouTube videos on your website is that you do not host those videos on your server. YouTube host those Videos on its server and you simply have to embed the video on your website using the features of HTML5.

To use the YouTube video, you must embed the YouTube id of the video. By default, YouTube has a unique video id for each video. You should use this id inside the <iframe> tag via src attribute.

To get the YouTube id on Desktop/Laptop

open the YouTube video and look at the url. The unique id after “?v=” is the YouTube video id. In the below image, the video id is NUZ-zmeddu4.

YouTube Video Id

To get the YouTube id on Mobile

open the YouTube video and click on “share”. There are multiple ways to get the YouTube video id here. One way is shown below in the example-

YouTube video Id on Mobile - Share link

You will get a screen like below where you can look at the video id

HTML5 YouTube Video embed code with video id

In the above screenshot, you can see that the “Embed” option is available. If you click on this “Embed”, you will get HTML5  YouTube Embed code with an iframe tag. You have to simply paste this code in your web document to embed this YouTube video as below –

<iframe width="560" height="315" src="https://www.youtube.com/embed/NUZ-zmeddu4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

There are alternatives available to embed YouTube videos as well. These are discussed below –

Embed YouTube Video in HTML

To use the YouTube video, you can either use the embed code which you can directly get from the YouTube video or the other way is to manually embed the YouTube id  inside the <iframe> tag via src attribute. Refer the syntax below – 

Syntax:
<iframe src=”https://www.youtube.com/embed/video_id”>
</iframe>;

Example

<iframe width="400" height="300" src="https://youtube.com/embed/cRCh4fDS1DI">
</iframe>
Run the Code

HTML YouTube Autoplay

Make sure to append the url with ?autoplay=1 parameter to automatically play the video when the user comes to your Web page.

  • The parameter ?autoplay=0 when appended means – Do not automatically play the video at the start when the user visits the page
  • While the parameter  ?autoplay=1 requests the browser to automatically render the YouTube video file.

Example

<iframe width="400" height="300" src="https://youtube.com/embed/cRCh4fDS1DI?autoplay=1">
</iframe>
Run the Code

HTML YouTube Video Autoplay Loop

Make sure to append the url with ?autoplay=1 parameter & loop=1 which will allow the YouTube video to play in a loop again and again. You need to append the playlist=video_id parameter as well.

  • The parameter  ?loop=0 means that the video will play only one time.
  • The parameter  ?loop=1 means that the video will play in a loop again and again.

Example

<iframe width="560" height="315" src="https://youtube.com/embed/cRCh4fDS1DI?autoplay=1&loop=1&playlist=cRCh4fDS1DI">
</iframe>
Run the Code

HTML YouTube Controls

The YouTube controls allow the users to provide additional control options for the YouTube video.

  • The parameter  ?controls=0 means that the video will not have any control option.
  • While ?controls=1 means that the video will have a control option.

Example

<iframe width="400" height="300" src="https://youtube.com/embed/cRCh4fDS1DI?controls=0">
 </iframe>
Run the Code

YouTube Embed And Object HTML Tags

The <embed> tag & <object> tags are deprecated now. These are similar to <iframe> tag which is used to embed a video.

As this tag is obsolete now, you should not use it.

Example of YouTube Embed And Object

<h2>Example of HTML Embed tag</h2>
<embed width="300" height="200" src="https://youtube.com/embed/cRCh4fDS1DI">

<h2>Example of HTML object tag</h2>
<object width="300" height="200" data="https://www.youtube.com/embed/5OVf3ap8HGs">
</object>
Run the Code

HTML YouTube Playlist

We already know how to embed a single YouTube video on our HTML document but there is a way to add a full playlist as well. Just click on a playlist and copy the url and code it inside the <iframe> tag by replacing the word ‘watch’ with ’embed’.

Example:
Suppose the url of the playlist is – “https://www.youtube.com/watch?v=qku_NFDHr3c&list=PL0VE_cI7-AYTzBmhpILrTz9NZTZXfJpju”, then you can replace the sub-string “watch” with “embed” so that the entire playlist is embedded in your web document. The new url will become – “https://www.youtube.com/embed?v=qku_NFDHr3c&list=PL0VE_cI7-AYTzBmhpILrTz9NZTZXfJpju”.

Now, all the videos inside the playlist will load play in your website one after the other until the user closes it by choice.

Example

<!DOCTYPE html>
<html>
  <body>
  <h2>Example of HTML YouTube Playlist</h2>
   <iframe width="560" height="315" 
    src="https://www.youtube.com/embed?v=qku_NFDHr3c&list=PL0VE_cI7-AYTzBmhpILrTz9NZTZXfJpju" 
           frameborder="0" allowfullscreen>
   </iframe>
  </body>
</html>
Run the Code

YouTube Video Background

There is an option to set the because of iframe videos in the Background of the web page. You need to simply embed the <iframe> tag in your webpage to set your YouTube as background.

Example

<div style="position:fixed; width:100%; height:100%">
 <iframe frameborder="0" height="100%" width="100%" src="https://www.youtube.com/embed/5OVf3ap8HGs?autoplay=1">
 </iframe>
</div>
Run the Code

YouTube Video Responsive

Making your YouTube video is an art, not science. There is no fixed way to make the video responsive.

Based on your requirement, you can use the CSS properties like position, flex, grid, float, media queries, etc.

It is better to set the width/height/max-width as close to 100% but this is not always required. You have to make your videos responsive as per your need.

Example of Responsive YouTube Video 

.iframeval {
 position: relative;
 padding-bottom: 50%;
 height: 0;
}

.iframeval iframe {
 position: absolute;
 width: 100%;
 height: 100%;
}
Run the Code
Prev
Next
Facebook Twitter Google-plus

Tutorials for all brains!