Back to: HTML Tutorials
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:
- Upload the video to YouTube.
- Copy the YouTube video link.
- Define an <iframe> element and paste the video link inside the src attribute.
- 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:
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 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 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:
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.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.