8.7 HTML YouTube

Playing a YouTube Video in HTML

To play your video on a web page, do the following:

• Upload the video to YouTube
• Take a note of the video id
• Define an <iframe> element in your web page
• Let the src attribute point to the video URL
• Use the width and height attributes to specify the dimension of the player
• Add any other parameters to the URL (see below)

Example 1: YouTube in an iframe

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

YouTube Autoplay + Mute

You can let your video start playing automatically when a user visits the page, by adding autoplay=1 to the YouTube URL.

Note: Automatically starting a video can annoy your visitor and end up causing more harm than good!

• Chrome added stricter autoplay policies in 2018. Chromium browsers do not allow autoplay in all cases. However, muted autoplay is always allowed.
• Add mute=1 after autoplay=1 to let your video start playing automatically (but muted).

Example 2: YouTube with autoplay

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

YouTube Playlist

A comma separated list of videos to play (in addition to the original URL).

N.B. to embed a YouTube playlist, watch the video in the list you want to be first in the list and while playing the video, right click on the video and choose "embed video". Paste the resulting code in the HTML page where you want the <iframe> containing the code to appear.

To make the embedded videos mobile compatible, use <style> to set the width attribute of the video to 100% (the full width of the device display) and the min-height attribute to the actual height of the video. The embedded video will scale down to the size of the device width or scale up to the size of the browser window on a large computer screen.

YouTube Loop

• Add loop=1 to let your video loop forever.
• Value 0 (default): The video will play only once.
• Value 1: The video will loop (forever).

Example 3: YouTube loop

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

YouTube Controls

• Add controls=0 to display controls in the video player.
• Value 0: Player controls does not display.
• Value 1 (default): Player controls display.

Example 4: YouTube controls

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