How to embed a YouTube video on a website

YouTube widget is a tool that allows you to add videos from a video hosting service to a website or share on social networks. In this article, we will look at the advantages and disadvantages of the widget and how to place it on the site.

Advantages:

• No registration or download of additional programs is required for viewing.
• Various video formats are supported.
• It is inserted into the site with one line of code.

Disadvantages:

• Ads are shown that distract from viewing.
• The fixed design of the widget does not allow you to fine-tune its appearance to your site.

Adding to the site

The easiest way to embed a YouTube video on a website is to use the iframe tag. But first, let's figure out what it is.

A frame is an html markup element that creates a child window on a site page where you can download the contents of another web page.

Now let's get started.

For example, we created a simple page and added a div block as a container inside the html document. The h1 header was placed inside it, and the frame code will also be inserted here.

Next, open the page with the video that we are going to insert.

We will have it:

https://www.youtube.com/watch?v=mENBC34X2Q4

Click the Share button under the video player

Then, in the modal window that opens, click Embed

The generated embed code will be displayed on the right side of the window

In our case, the code looks like this:

Inside, attributes such as:

• width и height – set the length and height of the window accordingly;
• src – to insert the full path to a YouTube video;
• frameborder – inserting a frame around the window. The value of 1 is yes, 0 is no;

allowfullscreen – the presence of this attribute means that it is allowed to display the video in full-screen mode.

This is what the page looks like now

There are not only regular videos on YouTube, but also shortened vertical Shorts lasting up to 1 minute.

They are also inserted via the iframetag. You can get it like this:

• Open the desired "shorts".
• Hover over it and right-click to open the context menu.
• Select "Copy HTML code".

Paste the copied fragment into the html markup of the page, as in the previous example. The result looks like this:

Important: the placement of the video on the site must be agreed with the author of the video and the policy of the service. Make sure that the video has embed permission and does not violate copyrights.

Usage examples

YouTube videos can have different content. Depending on the goals, this can be a review and demonstration of the product, its comparison with competitors, an educational video about the industry, product or service, customer reviews and live broadcasts.

Thanks to the embedded YouTube videos, users can watch videos directly on the site page, without having to switch to another resource. But besides the hosting itself, there are other services that allow you to post videos on the site. One of these is the QForm video widget. It allows you to add videos to the site, customize the display type, launch options, and the CTA button. It is possible to attach a video to the feedback form, which can be useful for instructions or answers to questions.