How to Embed a YouTube Video in HTML

James Orublig / Updated 9 October 2023 1:47 pm / 4 minute

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 where 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.

Contents

How to Insert a Video in HTML Using the Embed Code

Follow these steps to embed videos in your webpage:

Open the YouTube page and find the video you want to embed. You can buy YouTube likes to embed a highly engagement video.
Click on the “Share” button located under the video to open the sharing options.
Next, click 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. If you try to embed your own video, it would be great to learn how to get verified on YouTube to look more professional.
Here you can adjust the dimensions of the video by setting the width and height.
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 the space at the “Start at” option and check the box.
While you are here, you can add any other parameters you want to the URL. (Details are under “How to Use Parameters”)
Click “Copy” to copy the YouTube embed code to your clipboard.
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.
Find where you want to put your video on 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>

</body>

</html>

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

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.

YouTube Controls Parameter

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

‘controls=0’ means player controls do not display

‘controls=1’ means player controls display

Modestbranding Parameter

The modest branding 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.

Loop Parameter

If you want to play your video on a 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.

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.

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 video 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“

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.

https://www.youtube.com/watch?v=9YffrCViTVk

Frequently Asked Questions About

How can I make an embedded video play automatically?

You can make an embedded video play automatically by adding & ‘autoplay=1’ to the video 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.

James Orublig

Posts: 539

Hi, my name is James but my friend calls me JamesTheNews since I always have the latest news about social media. Follow my blogs to learn every bit of trickery there is to social media.