YouTube in HTML

YouTube in HTML with Examples

In this article, I am going to discuss YouTube in HTML with Examples. Please read our previous article where we discussed Plugins in HTML with Examples. At the end of this article, you will understand everything about HTML YouTube with Examples.

HTML YouTube

Adding a video to a webpage was a tough task because different browser supports different video formats so it had to be converted to various formats in order to play in all browsers. It might be difficult and time-consuming to convert videos to multiple formats. With the help of YouTube, adding a video to a web page has become simpler. YouTube helps users in hosting videos so that they can be embedded on different websites.

Playing a YouTube Video in HTML

To embed a video on a web page, follow the steps below:

  1. Upload the video to YouTube.
  2. Copy the YouTube video link.
  3. Define an <iframe> element and paste the video link inside the src attribute.
  4. Use the width and height attributes to define the width & height of a video player.
Example:

In the example below we will learn to add YouTube videos on a webpage.

<!DOCTYPE html>
<html>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
background-color:dodgerblue;}
</style>
<body>

<iframe frameborder="0" width="500" height="320" src="https://www.youtube.com/embed/EpbmaJbDzlQ">
</iframe>

</body>
</html>
Output:

Playing a YouTube Video in HTML

YouTube Autoplay + Mute in HTML

By adding autoplay=1 to the YouTube URL, we can make our video play automatically when the page loads. Similarly, we can mute the video by adding mute=1 after autoplay=1 in the video URL.

In the example below, we have set the value for autoplay and mute to 1, which means that the video will be muted and run automatically when the website loads.

<!DOCTYPE html>
<html>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
background-color:hotpink;}
</style>
<body>

<iframe frameborder="0" width="500" height="320" src="https://www.youtube.com/embed/ItBBUF4t7Vc?autoplay=1&mute=1">
</iframe>

</body>
</html>
Output:

YouTube Autoplay + Mute in HTML

YouTube Loop

The default value for the loop is zero, which indicates that the video will only play once, while loop value one indicates that the video will loop infinitely. In the example below we have set the value for the loop to one. Which means that our video will loop forever.

<!DOCTYPE html>
<html>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
background-color:mediumseagreen;}
</style>
<body>

<iframe frameborder="0" width="500" height="320" src="https://www.youtube.com/embed/9DvqxVTH6qs?playlist=9DvqxVTH6qs&loop=1">
</iframe>

</body>
</html>
Output:

YouTube in HTML with Examples

YouTube Controls

The default value for controls is one, which indicates that the browser will display controls while control value zero indicates that the browser will not display controls. In the example below we have set the value for controls to zero. This means that the browser will not display video controls.

<!DOCTYPE html>
<html>
<style>
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
background-color:mediumseagreen;}
</style>
<body>

<iframe frameborder="0" width="500" height="320" src="https://www.youtube.com/embed/9DvqxVTH6qs?playlist=9DvqxVTH6qs&controls=0">
</iframe>

</body>
</html>
Output:

YouTube in HTML with Examples

In the next article, I am going to discuss APIs in HTML with examples. Here, in this article, I try to explain YouTube in HTML with Examples and I hope you enjoy this YouTube in HTML with Examples article.

Leave a Reply

Your email address will not be published.