Add/Embed YouTube Videos
Youtube is a video hosting platform. It conveniently stores videos and shares them with the world. However, what if we want to play YouTube videos on our website?
Youtube has an Embed Video feature that allows adding their videos on any website. Hosting videos on websites and managing them can get complicated. Hence, its better to first upload them on YouTube and then Embed on website.
Adding Youtube videos provide full features of the youtube video player. Google can easily monetize videos.
Playing a YouTube Video on website
To Add and Play Youtube Videos on a website, just follow these simple steps:- Upload the video to YouTube, which you want to Embed.
- After uploading play the video on youtube website. You can choose any video uploaded by any other person also.
- Right click over the video, a menu will open.
- From the menu, click
copy embed code. - The code is copied, just paste this code in the body of the webpage. The video will be displayed where the code was pasted.
Embed Youtube Video Example using IFrame
<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 Video Autoplay
If you want the video to be played automatically when the page loads, then use autoplay. Autoplay is a feature of Youtube that will start the video regardless of whether the user plays it or not.
The autoplay has two values:
autoplay=0(default): The video will not play automatically when the player loads on the Web Browser.autoplay=1: The video will play automatically when the player loads on the Web Browser.
Note : Use the autoplay feature very responsibly as it can be very annoying to the visitor.
<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 Loop
A Video loop is a feature of restarting the video from the beginning after it finishes.
THe loop has two values:
loop=0(default): Once the video finishes, it will not restart automatically.loop=1: The video will play in a loop forever.
<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
Youtube player controls can be manually turned on/off.
controls=0: Youtube video player will not display any controls like play, pause and so on.controls=1(default): All the controls will be displayed and accessible.
<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
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 »