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.
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-
You will get a screen like below where you can look at the 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 –
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 –
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.
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.
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.
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
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’.
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.
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.
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.