HTML Tutorial
HTML Introduction
HTML Tutorial
HTML Tags
HTML Attributes
HTML Formatting
HTML Heading
HTML Paragraph
HTML Anchor
HTML Image
HTML Table
HTML Fonts
HTML Lists
HTML Ordered List
HTML Unordered List
HTML Description List
HTML Forms
HTML Forms
HTML Input Types
HTML Form Attributes
HTML Tags
HTML Title
HTML Marquee Tag
HTML Code
HTML Quotes
HTML Button Tag
HTML BR Tag
HTML HR Tag
HTML Bold Tag
HTML 5
HTML5 Tutorial
HTML Meter
HTML Article Tag
HTML Footer Tag
HTML Figure Tag
HTML Dialog Tag
HTML 5 Advance
HTML Doctype
HTML Meta Tags
HTML Styles
HTML Scripts
HTML Progress Tag
HTML Symbols
HTML Media
HTML Video Tag
HTML Audio Tag
HTML Youtube Video
HTML 5 Form
HTML Datalist Tag
HTML keygen Tag
HTML output Tag
HTML 5 Graphics
HTML Canvas
HTML SVG
Reading Section
Interview Questions
HTML 5 Quiz
Advertisement
Advertisement
HTML YouTube Videos
In the Previous chapter, we learned 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>
<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
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>
<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
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>
<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
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>
<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
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>
<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
Recommended :
Color Picker
List of color names supported by all browser »
Character Code
List of character codes to display special character »
Language Code
List of all language supported by all browser »
Country Code
List of Country code supported by all browser »