HTML YouTube

The HTML media element embeds YouTube videos in a web page. There is no need to try different video formats; use specific HTML codes to play videos directly on your web page and make the website more interactive.

How to Add YouTube Video in HTML?

You will need an ID to add a YouTube video to your webpage. Get the video ID from YouTube by saving or playing the video. Once you have the ID add an <iframe> element. Insert the video link using the src attribute in HTML and adjust the dimensions of the video using width and height attributes.

<iframe width="350" height="200" 
    src="https://www.youtube.com/embed/jf8Xq9omKxQ">
</iframe>

Autoplay

To let the video play automatically, add autoplay=1 to the YouTube URL. By doing this, the video will play automatically whenever a user visits your website.

Keep in mind: Autoplay is generally restricted in most Chromium-based browsers. However, autoplay will be permitted without issues if the video is muted.

<iframe width="350" height="200" 
    src="https://www.youtube.com/embed/jf8Xq9omKxQ?autoplay=1">
</iframe>

Autoplay & Mute

To mute the autoplay video, add mute=1 after autoplay=1. The video will still play automatically without requiring any action but will be muted.

<iframe width="350" height="200" 
   src="https://www.youtube.com/embed/jf8Xq9omKxQ?autoplay=1&mute=1">
</iframe>

YouTube Playlist

To create a YouTube playlist, include the video IDs after the original URL using the playlist parameter. Separate each video ID with a comma.

<iframe width="360" height="215" 
    src="https://www.youtube.com/embed/jf8Xq9omKxQ?
    playlist=XFxG5HRHpgQ,eiv-SdAsIyk,JRpIRBmBY98">
</iframe>

Play in Loop

The loop value, by default, is zero, and the video is played only once. To play a video in a loop, add loop=1.

<iframe width="560" height="315" 
    src="https://www.youtube.com/embed/jf8Xq9omKxQ?
    playlist=XFxG5HRHpgQ,eiv-SdAsIyk,JRpIRBmBY98&loop=1">
</iframe>

Video Controls

If you don’t want to display video controls in the player, add controls=0. Use control=1 to display the video player controls.

<iframe width="350" height="200" 
    src="https://www.youtube.com/embed/jf8Xq9omKxQ?controls=0">
</iframe>

Integrating the HTML media elements makes a web page interactive and enhances user engagement. It also gives a visually appealing look to the webpage.

Watch Video on YouTube

HTML YouTube