HTML YouTube


YouTube is a video-sharing website. It allows you to save videos and share them with the rest of the world. What if, on the other hand, we want to embed YouTube videos on our website?

YouTube's Embed Video function enables users to embed their videos on any website. Managing and hosting videos on websites can be difficult. As a result, it is preferable to upload them to YouTube first, then embed them on your website.

Adding YouTube videos gives you access to all of the video player's features. Videos can be easily monetized by Google.


How to Play Youtube Videos on your site?


Simply follow these quick steps to add and play Youtube videos on your website:

  • Embed the video that you've uploaded to YouTube.
  • Play the video on the YouTube website after it has been uploaded. You can also select any video that someone else has uploaded.
  • When you right-click on the video, a menu will appear.
  • Copy the embed code from the menu.
  • The code has been copied; simply paste it into the body of the webpage. Wherever the code was pasted, the video would be shown.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Embedding Youtube Video </title>
</head>
<body>

<iframe width="560" height="315" src="https://www.youtube.com/embed/6stlCkUDG_s" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</body>
</html>
Live Demo!



Output:


Autoplay in Youtube


Using autoplay if you want the video to start playing as soon as the page loads. Youtube's autoplay function starts the video regardless of whether the user wants to watch it or not.

There are two options for autoplay:

  • autoplay=0 (default): When the player loads in the Web Browser, the video will not immediately start playing.

  • autoplay=1: When the player loads in the Web Browser, the video will start playing automatically.


Loops in Youtube


A video loop is a function that allows you to restart a video from the beginning after it has finished playing.

There are two values in the loop:

  • loop=0 (default): The video will not immediately restart after it has ended.
  • loop=1: The video would loop indefinitely.


<iframe width="560" height="315" src="https://www.youtube.com/embed/6stlCkUDG_s?loop=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Live Demo!



Output:


Controls In Youtube


Controls for the Youtube player can be switched on and off manually.

controls=0: No controls, such as play, pause, and so on, will be shown in the Youtube video player.

controls=1 (the default): All controls are visible and available.



<iframe width="560" height="315" src="https://www.youtube.com/embed/6stlCkUDG_s?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Live Demo!



Output: