Home » HTML » Embed HTML YouTube Video Tag

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

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

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

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

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.

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 . Creating a Footer in HTML
2 . Html Paragraph Tag
3 . Use of Quotation in HTML
4 . HTML Formatting Tags

5 . how to embed YouTube video in HTML
6 . Symbols in HTML
7 . Create Simple Login Form
8 . BootStrap 4 Photography Snippets

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