How to Embed a YouTube Video in HTML?

How to Embed a YouTube Video in HTML?

Having relevant video content on your website can be an engaging feature. Maybe you are giving instructions on a subject, but you feel like it would be comprehended better when it’s also shown by video, or you have a corporate website in which you want to show a video from your business on YouTube. Possibilities are endless on why you want to play a video on your blog or website, but converting videos to different formats to play on your website can be time-consuming and complicated. The easiest way to add a video in HTML is to let YouTube play the videos on your web page by embedding the video. Here is a step by step guide on how to embed a YouTube video in HTML.

How to Insert a Video in HTML Using the Embed Code?

Follow these steps to embed videos in your webpage:

  1. Open the YouTube page and find the video you want to embed.
  2. Click on the “Share” button located under the video to open the sharing options.
  3. Next, click on the “Embed” option, which will appear under “Share a Link.” This will open a screen with the YouTube video embed code, which is also called an iframe code.
  4. Here you can adjust the dimensions of the video by setting the width and height.
  5. YouTube also allows you to customize your video by giving you the option to start it from the point you want. Type in the desired starting time next to space at the “Start at” option and check the box.
  6. While you are here, you can add any other parameters you want to the URL. (Details are under “How to Use Parameters”) 
  7. Click “Copy” to copy the YouTube embed code to your clipboard.
  8. Open your web page’s HTML options. Websites are built with HTML codes, and the YouTube embed code is designed to fit into this code so that the video is shown without any changes. 
  9. Find where you want to put your video in the HTML page. Everything you have displayed on the page is also written in the code. So, for example, if you want your video to be under the title “How to Embed Tutorial,” your code will look something like this:

<!DOCTYPE html>

<html>

<body>

<title>How to Embed Tutorial</title>

<br>

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/6zbsUtQL4nY” frameborder=”0″allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

</body>

</html>

  1. Paste the video code where you want it to be.
  2. Save the changes. Check if the video is at the right spot on the website.
Use YouTube Parameters

How to Use Parameters?

YouTube offers some options to customize the video playing experience. You can still add some more features if you tinker a little bit with the embed code by adding additional parameters. Here we gathered some useful parameters you might want to make use of.

1. YouTube Controls Parameter

By using the YouTube controls parameter, you can either hide the controls at the bottom of the video or let it stay.

‘controls=0’ means player controls do not display

‘controls=1’ means player controls display

2. Modestbranding Parameter

The modestbranding parameter is responsible for showing any type of branding. In this case, you can hide the logo and branded play button present in Youtube videos. Add ‘modestbranding=1’ to the iframe code to remove branding.

3. Loop Parameter

If you want to play your video on loop forever, you have to use the loop parameter. ‘loop=1’ means the video will loop, whereas ‘loop=0’ means the video will only play once, which is also the default mode.

4. YouTube Video Autoplay Parameter

You can make an embedded video start to play automatically on your webpage by using the autoplay parameter. Adding ‘autoplay=1’ to the embed code will make the video play automatically. 

5. Mute Parameter

If you are using the autoplay or loop parameter, you might want to consider adding the mute parameter as well because an automatically starting or never-ending video can annoy your visitor and cause them to leave your website prematurely. ‘mute=1’ means that the video will play on mute. 

NOTE: To use any of the parameters, add the ones you want to the videos embed code, right after the video ID using ‘&’. (e.g. <iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/5cWa4tbSmp?&modestbranding=1&loop=1” 

Embed a YouTube Video in HTML

FAQs on How to Embed a YouTube Video in HTML

How can I make an embedded video play automatically?

You can make an embedded video play automatically by adding &‘autoplay=1′ to the videos embed code after the video id.

How can I start an embedded video at a certain time?

If you want to start your video at a certain time, just add the time you want it to start next to the “Start at” box which will appear when you open the embed code on YouTube or add ‘?start=(time)’ to the video’s embed code.

How can I make an embedded video play on the loop but muted?

To make an embedded video play on a loop and on mute, add ‘&loop=1&mute=1″ to the YouTube embed code.

How to turn off embedding for my video?

If you don’t want your video to be potentially embedded in external sites, you can turn off embedding. Sign in to YouTube Studio, select “Videos” on the left-hand menu, then select details on the video you want to manage. Go to “more options” and untick the box next to “Allow Embedding”. Save the changes you made. 

What is the privacy-enhanced mode?

The privacy-enhanced mode allows you to embed videos without using any cookies to monitor viewing behavior. If you don’t want YouTube to collect any information from your website visitors, activate the privacy-enhanced mode by checking the box under the YouTube video embed link.

Conclusion on How to Embed a YouTube Video in HTML

In this article, we have gone over why using a YouTube video on your website or blog post can be beneficial and explained how to embed a YouTube video with the embed code provided by YouTube to HTML. Additionally, we detailed the use of parameters, their functions, and how the addition of parameters can customize the video’s playing experience on your website according to your needs. 

If you liked this video about inserting a YouTube video in HTML, you can also be interested in our other articles about YouTube such as how to make a GIF from a YouTube video.

We think that you may also be interested in which is our previous post about Facebook Support.
[Total: 23 / 5]
Dennis

Posts: 697

Born in February 1993, Dennis is a social media blogger. Originally started working as a car salesman, he was always a social media and internet enthusiast. So, he began optimizing websites and e-commerce sites for car dealerships. Later, it was found out that social media is a perfect area for ma...

1 Comment

Your email address will not be published. Required fields are marked *