In the Previous chapter, we we learn how to convert videos to different formats to make them play in all browsers. Converting videos to different formats can be difficult and time-consuming. so, the easier solution is to let YouTube play the videos in your web page.

Playing a YouTube Video in HTML

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

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.

Play YouTube Videos using Iframe

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Embedding a YouTube Video</title>
</head>
<body>
<iframe width="560" height="315" src="//www.youtube.com/embed/jFGKJBPFdUA" frameborder="0" allowfullscreen></iframe>
</body>
</html>

Output

Embedding a YouTube Video

YouTube Autoplay

You can also play automatically when a user visits that page by adding a simple parameter to your YouTube URL.

Autoplay Value 0 (default): The video will not play automatically when the player loads on Web Browser.
Autoplay Value 1: The video will play automatically when the player loads on your Web Browser and .

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

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Youtube Video Autoplay </title>
</head>
<body>
<iframe width="420" height="345" src="//www.youtube.com/embed/jFGKJBPFdUA?autoplay=1">
</iframe>
</body>
</html>

Output

HTML Youtube Video Autoplay

YouTube Playlist

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

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Youtube Loop Videos </title>
</head>
<body>
<iframe width="720" height="350"
src="https://www.youtube.com/embed/watch?v=M81wneSjQbA&list=PL0Z67tlyTaWptuRZdRxVjMn4FoYuK6ArT&loop=1">
</iframe>
</body>
</html>

Output

HTML Youtube Playlist Videos Examples

YouTube Loop

Autoplay Value 0 (default): The video will play only once loads on Web Browser.
Autoplay Value 1: The video will play in loop forever.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Youtube Playlist Videos </title>
</head>
<iframe width="720" height="350"
src="https://www.youtube.com/embed/https://youtu.be/QPGmwRNkffc&loop=1">
</iframe>
</body>
</html>

Output

HTML Youtube Loop Videos

YouTube Controls

Autoplay Value 0: Player controls does not display.
Autoplay Value 1 (default): Player controls display.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Youtube Video Control </title>
</head>
<body>
<iframe width="720" height="350"
src="//www.youtube.com/embed/9aoUpCXY7uk?controls=0">
</iframe>
</body>
</html>

Output

HTML Youtube Video Control

Recommended :

1 . How to Create HTML Forms
2 . What is an HTML Tag?
3 . What is the use of the <title> element in HTML?
4 . HTML Unorder List

5 . HTML to add Audio in HTML
6 . Add Script in HTML
7 . Create Simple Login Form
8 . Create Bootstrap 4 Spinner

Topics

BootStrap Snippets
JS Keywords
Form Events
CSS Navbar
JS Objects
Cookies
Forms
Icons
Buttons
Progress
Footer
Errors