HTML YouTube Videos
The easiest way to play videos in HTML is to use YouTube.
Struggling with Video Formats?
Converting videos to different formats can be difficult and time-consuming. An easier solution is to let YouTube play the videos on your page.
YouTube Video Id
YouTube shows an id (like tgbNymZ7vqY) when you save or play a video. You use this id to refer to the video in your HTML.
Playing a YouTube Video in HTML
To play a video on a page: upload it to YouTube, note its video id, add an <iframe> element, point the src attribute at the video URL, set the width and height for the player, and add any other parameters to the URL.
Example
A YouTube video embedded with an <iframe>.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Youtube Basic</title>
</head>
<body>
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
</body>
</html>
YouTube Autoplay + Mute
You can make a video start automatically when a user visits the page by adding autoplay=1 to the YouTube URL, though auto-starting a video can annoy visitors.
Note: Chromium browsers usually block autoplay, but muted autoplay is always allowed. Add mute=1 after autoplay=1 to let the video start automatically but muted.
Example
A YouTube video that autoplays muted.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Youtube Autoplay Mute</title>
</head>
<body>
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
</iframe>
</body>
</html>
YouTube Playlist
The playlist parameter takes a comma-separated list of videos to play in addition to the original URL.
YouTube Loop
Add playlist=videoID and loop=1 to make a video loop forever. loop=0 (the default) plays the video only once, and loop=1 loops it forever.
Example
A YouTube video set to loop forever.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Youtube Loop</title>
</head>
<body>
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>
</body>
</html>
YouTube Controls
Add controls=0 to hide the player controls. controls=0 hides them, and controls=1 (the default) shows them.
Example
A YouTube video with the player controls hidden.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Youtube Controls</title>
</head>
<body>
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
</iframe>
</body>
</html>