Advertisement

Advertisement


HTML YouTube Videos

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:
  1. Upload the video to YouTube.
  2. Take a note of the video id.
  3. Define an <iframe> element in your web page.
  4. Let the src attribute point to the video URL.
  5. Use the width and height attributes to specify the dimension of the player.
  6. Add any other parameters to the URL.

Play YouTube Videos using Iframe


<!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.

<!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).


<!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.


<!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.


<!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









Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.