HTML YouTube Videos

The simplest way to include a video in HTML is to use YouTube.

Worried about video formats?

Converting the video to a different format can be both difficult and time-consuming.

A simpler solution is to let YouTube play the video in your web page.

YouTube Video Id

When you save (or play) the video, YouTube will display an id (e.g., ih1l6wb7LhU).

You can use this id and refer to your video in the HTML code.

Embed YouTube video in HTML

To play the video on the web page, please follow these steps:

  • Upload the video to YouTube
  • Note the video id
  • Define in your web page <iframe> The element
  • Let src Properties to point to the video URL
  • Use width and height Properties to specify the player size
  • Add other parameters to the URL (see below)

Example

<iframe width="420" height="315"
src="https://www.youtube.com/embed/ih1l6wb7LhU">
</iframe>

Try It Yourself

YouTube Autoplay + Mute

You can make the video start playing automatically when the user visits the page by adding autoplay=1 to the YouTube URL. However, automatically starting the video playback can be annoying to your visitors!

Note:In most cases, Chromium browsers do not allow autoplay. But always allow muted autoplay.

In autoplay=1 Add after mute=1It can let your video start playing automatically (but muted).

YouTube - Autoplay + Muted

<iframe width="420" height="315"
src="https://www.youtube.com/embed/ih1l6wb7LhU?autoplay=1&mute=1">
</iframe>

Try It Yourself

YouTube Playlist

A comma-separated list of videos to play (excluding the original URL).

YouTube Loop

Add loop=1 This will make your video loop forever.

Value 0 (default): The video will play once.

Value 1: The video will loop (forever).

YouTube - Loop

<iframe width="420" height="315"
src="https://www.youtube.com/embed/ih1l6wb7LhU?playlist=ih1l6wb7LhU&loop=1">
</iframe>

Try It Yourself

YouTube Controls

Add controls=0 This will make the video player not display controls.

Value 0: Player controls are not displayed.

Value 1 (default): Player controls are displayed.

YouTube - Controls

<iframe width="420" height="315"
src="https://www.youtube.com/embed/ih1l6wb7LhU?controls=0">
</iframe>

Try It Yourself