How to add (embed) YouTube video in HTML website

add youtube video in html

How to add YouTube video in HTML website while we add text, images, videos and many types of things in HTML. But you think it is hard to add a YouTube video in HTML.

Although it is so simple and amazing process. Lets Kick start and add video in your HTML webpage.

While it gives value to you and makes you proud and valuable when you share this rich content to the others.

Benefits of embedding YouTube video on your website

  • It speeds up loading times on your website.
  • It allows you to select the various options for video hosting.
  • It improves the engagement of posts on social media.
  • Users can watch the video without leaving your site.

Steps to add YouTube video

Step-1 Make an HTML webpage
Create an HTML page and ready it with the Basic code.


Step-2 Go to YouTube
Lets go to YouTube and select/upload the video which you want to add in your website.


Step-3 Click the share button
you’ll see a share button. If you click it, you’ll be presented with various sharing options including several websites for social networking.


Step-4 Click on “Embed”
When you click on “Embed”, YouTube will automatically generate the code you can utilize. The iframe tag can have different attributes, including an URL to the source video along with the width, height, and width.


Step-5 Click on ‘copy’
This code can be copied and pasted on the HTML page.


Step-6 Open your HTML page
Locate where you want to add video.


Step-7 Paste the iframe tag
paste the iframe tag you copied from YouTube into your HTML page.


Step-8 Save the File changes you made
Save the changes you made on your HTML page. After saving, while you are still on your HTML page open it to browser


Step-9: Your Browser’s output.
Based on the HTML code (or the way you styled the HTML code), you can insert the iframe tag where you’d like in the HTML page. Once you’ve succeeded in embedding a video on your web page, you can engage with the video.

This means that you can move forward or rewind the video, play it or pause and also adjust your volume for the movie. You can also click the YouTube icon on YouTube’s embedded pages to stream the movie directly from YouTube. These actions are referred to as control of video.


Step-10 Enjoy YouTube Page
Here you go, you can enjoy you video in an HTML page but as my webpage is looking attractive then you why ??
You can add more things in website to look good and you watch my YouTube video on the same topic.

<!DOCTYPE html>
<html>
<head>
<body bgcolor="yellow">

<center>
<h1> I <font color="red"> ♥ </font> Technocrat United </h1>

<iframe width="560" height="315" src="https://www.youtube.com/embed/ahf5DAQ9hhE?start=72" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</center>

</body>
</html>

Output

Here is the Output – how to embed a YouTube video in HTML page

Important tips

  • Avoid hyperlinked video: The URL of the video should be on its own with no spaces or characters otherwise, it won’t embed.
  • The term “hyperlink” refers to a highlighting done to a hyperlink so that, when hovered or clicked, the browser displays a different page or alters the currently displayed page to display the linked content.
  • You may also embed images and other items within a blog post or webpage provided that the content you wish to embed has an own web address.
  • If the video you’d like to embed isn’t you own work, it’s recommended to seek permission from the owner in order to prevent copyright infringement.

Enabling / Disabling YouTube controls

The YouTube Player gives you controls like play, pause, volume etc. That can be disabled or enabled using the controls parameter.
There are two parameters available that can be used :
Value 1 (default case) : Player controls are displayed.
Value 0 : Player controls are not displayed.

Conclusion

In addition to understanding how to embed videos with HTML & without CSS, we have learned the reasons behind using <iframe> tag and URL rather than the <video> tag in HTML5.

Note

You can watch it on YouTube for more knowledge – Click Here
You can make registration form in HTML only – Click Here

Password – technobrainz