HTML YouTube Videos
Sometimes you may want to convert your videos to other formats to make them play in all browsers. However, it can be difficult and time-consuming to convert videos to other formats. An easier way is to embed YouTube's player directly on your web page using an <iframe> element.
When saving or playing a video, YouTube will display an id which you can use to refer to a video in the HTML code.
Playing a YouTube Video in HTML
If you want to play your video on a web page, follow these steps:
- Upload the video to YouTube
- Note the video ID
- Specify an
<iframe>element in your web page - Make the src attribute point to the video URL
- Use the height and width attributes for defining the dimension of the player
- Add other parameters to the URL (e.g.,
&rel=0to prevent unrelated recommended videos from appearing after playback)
Example of playing a YouTube video in HTML with the <iframe> element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8" allow="autoplay; fullscreen"></iframe>
</body>
</html>YouTube Autoplay
You can also make your video start playing automatically when visiting that page. For this, add a parameter to your YouTube URL.
If the value is 0 (default), the video will not start playing automatically when the player loads. If the value is 1, the video will start playing automatically when the player loads.
Note: Modern browsers require the allow attribute on the iframe for autoplay and fullscreen to function correctly.
Example of YouTube autoplay:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8?autoplay=1" allow="autoplay; fullscreen"></iframe>
</body>
</html>Besides the original URL, there can be a comma separated list of videos to play (YouTube playlist).
YouTube Controls
If the value is 0, the player controls will not display. If the value is 1 (default), the player controls will display.
Example of YouTube controls:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8?controls=0" allow="autoplay; fullscreen"></iframe>
</body>
</html>YouTube Loop
If the value is 0 (default), the video will play only once. If the value is 1, the video will loop endlessly.
Example of Youtube loop:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8?playlist=i8n1gSw_o_8&loop=1" allow="autoplay; fullscreen"></iframe>
</body>
</html>YouTube - Using the HTML <embed> or <object> tags
YouTube <embed> and <object> elements are deprecated. Instead, you should use <iframe>.
Example of adding YouTube videos with the <embed> element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<embed width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8" />
</body>
</html>Example of adding YouTube videos with the <object> element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<object width="560" height="315" data="https://www.youtube.com/embed/i8n1gSw_o_8"></object>
</body>
</html>Practice
Which HTML tag is used to embed YouTube videos into a web page?