How to add YouTube Vidoes using HTML

Hey everyone, in this blog we’ll see how we can add Youtube videos to our HTML page.

So for this, you must know about 2 things:

1. Youtube video ID
2. iframe tag (recommended)

NOTE: The object and the imbed tag have been deprecated since 2015.

YOUTUBE VIDEO ID

Whenever you post a video, youtube displays an id for your video when you save or play the video. This id can also be found in the URL when you play that video.

Ex: id =  “xgbAYmRiJyU”.The given id is of our video on how to make a Diwali page using Javascript, CSS, and canvas.

How to add the video to your HTML page

1. First note, the video id of the youtube video that you want to upload, from the URL
2. Define <iframe> tag in your code.
3. Let the src attribute of this iframe tag point to the URL of the video.
4. Define the other parameters like the height and width of the player.

<iframe width = "320" height = "480" 
src = "https://www.youtube.com/watch?v=xgbAYmRiJyU">
</iframe>

Other Features that can be added to this video are:

 

AUTOPLAY: So to get the autoplay feature for your video change your Youtube URL to:

https://youtube.com/watch?v=Your_Video_ID?autoplay=0/1″

If autoplay = 0, video doesn’t play automatically
If autoplay = 1, the video does play automatically

<iframe width = "320" height = "480" 
src = "https://www.youtube.com/watch?v=xgbAYmRiJyU?autoplay=1"> 
</iframe>

 

LOOP: So to get the loop feature for your video change your Youtube URL to:

https://youtube.com/watch?v=Your_Video_ID&loop=0/1″

loop = 0 means video won’t loop
loop = 1 means video will loop

<iframe width = "320" height = "480" 
src = "https://www.youtube.com/watch?v=xgbAYmRiJyU&loop=1"> 
</iframe>

3D Photo/Image Gallery (on space) Using HTML5 CSS JS