PUBLISHED ON: JULY 23, 2021
How to embed youtube videos within the webpage?
Answer: Using the <iframe> Tag
You can embed a youtube video along with other content on the webpage. HTML provides an easy and quick way to embed a youtube video on any webpage. When embedding other videos, we have to struggle with different types of formats. As all types of video formats are not supported by the browsers.
Embed Youtube video to HTML
The Youtube video can be embedded into the Webpage using an HTML <iframe> tag. The src contains the path of the youtube video. To add the path of the youtube video follow some steps.
- Go to the official website of Youtube www.youtube.com.
- Now choose the video you want to add.
- Click on the share option.
- You will get lots of options for social media apps along with the embed option.
- Click on embed. There is a code starting with the
<iframe> tag.
- Either you can copy the whole code to your HTML program or only copy the
src path and add your program src attribute.
You can use the width and height attribute to adjust the dimension of <iframe> on the page. Use frameborder attribute to add or remove border frame <iframe>. Use allowfullscreen attribute to get an option to enjoy video in full-screen mode.
Example: Embed Youtube video to the webpage
Here, we have embedded a video from our official youtube channel to a webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<h2>Embed Youtube video on HTML</h2>
<p> Here is a youtube video From our official youtube channel </p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/2oljZV6z72k" title="YouTube video player" frameborder="0" allowfullscreen></iframe>
</body>
</html>
Output
Additional Attributes
You can use some other additional attributes to control the video play.
- Add
autoplay=1"to automatically play the video on page load.
- Add
mute=1 to mute the video on page load. You can unmute it later.
- There is a list of values that can be added along with the URL separated by commas.
- Add
loop=1 to loop the video or loop=0 to play the video once.
- Add
controls=0 to hide controls in the video.
Example: Autoplay Youtube video
Here, we have added autoplay=1 to play video automatically while the page load. But the video will be muted as we have used mute=1.
Conclusion
So we can embed youtube videos on the webpage. HTML provides an easy way to add youtube videos within <iframe>. In addition to that, we can adjust video player size, adjust controls like video autoplay, looping and others.
