Home » HTML » Embed HTML YouTube Video Tag

HTML Youtube video tag url- Embed youtube video

Youtube is a video hosting platform. It is a great platform to share your video content with the world. However, what if you want to play YouTube videos on your website? You can embed youtube videos using HTML Youtube video tag url.

Youtube provides an embed Video url using <iframe> tag, 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 add them in the website.

Adding Youtube videos using Youtube video tag url in a website, increases view counts.It also enhances website content quality and can result in better search engine rankings.

Steps to Embed YouTube Video url in HTML

To Add and Play Youtube Videos on a website, just follow these simple steps:

  1. Upload the video to YouTube, which you want to Embed.
  2. After uploading play the video on youtube website. You can choose any video uploaded by any other person also.
  3. Right click over the video, a menu will open.
  4. From the menu, click copy embed code.
  5. The Youtube video url is now copied, just paste this code in the body of the webpage. The video will get displayed where the code was pasted.

HTML Example to embed Youtube Video url

Youtube uses <iframe> tags to add videos in other websites. The Youtube video url that you copied using above listed steps, has to be pasted within your website's body. Look at the example to understand the approach:


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

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


<!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 video 'loop' attribute

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.

<!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 video 'controls' attribute

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.

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











Follow Us: