HTML Adding Youtube videos

HTML Adding Youtube videos

Last Updated : 11 Mar, 2024

Adding a video to a webpage was a real challenge since one had to convert the videos to different formats to make them play in all browsers. Converting videos to different formats can be difficult and time-consuming.

Now, adding a video to a webpage has become as easy as copying and pasting and a very apt solution to add videos to a website is using Youtube. YouTube helps to host a video for a user so that they can be further embedded on web pages.

YouTube displays an id like "BGAk3_2zi8k", whenever a video is saved or played. This ID is further used as a referral for the YouTube video to be embedded in the webpage.

Table of Content

Steps to add a YouTube video on a Webpage
Steps to get the Video ID of a YouTube video
Adding Youtube video
Enabling YouTube autoplay and muted feature
Creating a YouTube playlist
Enabling / Disabling Youtube controls
Using object tag
Using embed tag

Steps to Add YouTube Video on a Webpage

Upload the video that you want to embed on your webpage on YouTube.
Copy the video ID of the video.
Use the iframe, object, or 'embed' element in your web page for video definition.
Use the src attribute to point to the URL of the video.
Dimensions of the player can be adjusted using the width and height attributes.

Steps to Get the Video ID of a YouTube Video

Open the YouTube video whose ID you want.
Right click on the video, from the menu select "Stats for nerds".

Screen-Shot-2017-12-05-at-43818-PM

3. The first value in the box is the Video ID.

Screen-Shot-2017-12-05-at-43833-PM

Note: The video id of this video is : il_t1WVLNxk

Adding Youtube video:

Using iFrame tag:

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Adding Youtube Video</title>
</head>

<body>

    <iframe height="480" width="500" 
            src="https://www.youtube.com/embed/il_t1WVLNxk">
      </iframe>

</body>

</html>

Output :

ezgifcom-video-to-gif-converter-(2)

Enabling YouTube autoplay and Muted Feature

Youtube's autoplay feature can be used to automatically play a video when a user visits that page. There are two types of parameters that can be used :

Value 1: The video starts playing automatically when the player loads.
Value 0 (default case) : The video does not play automatically when the player loads.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>YouTube video embed with autoplay and mute</title>
</head>

<body>

    <iframe height="480" width="500" 
            src="https://www.youtube.com/embed/il_t1WVLNxk?autoplay=1&mute=1">
      </iframe>

</body>

</html>

Output :

ezgifcom-video-to-gif-converter-(3)

Creating a YouTube Playlist

A playlist of youtube videos can be created using comma character which separates the list of videos to play.

The loop parameter is used to loop the number of playbacks on the videos :

Value 1: The video will keep on looping again and again.
Value 0 (default case): The video plays only once.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>YouTube video embed with playlist and loop</title>
</head>

<body>

    <iframe height="480" width="500" 
            src="https://www.youtube.com/embed/il_t1WVLNxk?playlist=AfxHGNRtFac&loop=1">
    </iframe>

</body>

</html>

Output:

ezgifcom-video-to-gif-converter-(4)

Enabling / Disabling Youtube Video Controls

The Youtube Player offers 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.

1. For Enabling Controls :

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>YouTube video embed with controls</title>
</head>

<body>

    <iframe width="440" height="372" 
            src="https://www.youtube.com/embed/il_t1WVLNxk/?controls=1">
    </iframe>

</body>

</html>

Output :

ezgifcom-video-to-gif-converter-(5)

2. For Disabling Controls

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>YouTube video embed without controls</title>
</head>

<body>

    <iframe width="440" height="372" 
            src="https://www.youtube.com/embed/il_t1WVLNxk/?controls=0">
    </iframe>

</body>

</html>

Output :

ezgifcom-video-to-gif-converter-(6)

Using object tag adding YouTube Videos

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>YouTube video embed using object tag</title>
</head>

<body>

    <object width="480" height="500" 
            data="https://www.youtube.com/embed/il_t1WVLNxk">
    </object>

</body>

</html>

Output :

ezgifcom-video-to-gif-converter-(7)

Using embed tag adding YouTube Videos

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>YouTube video embed using embed tag</title>
</head>

<body>

    <embed width="480" height="500" 
           src="https://www.youtube.com/embed/il_t1WVLNxk">

</body>

</html>

Output:

ezgifcom-video-to-gif-converter-(8)

Note: Nowadays, the object and the embed tag are not appreciated, therefore it is recommended to use the iframe tag.

HTML Adding Youtube videos

S

Shubrodeep Banerjee

Improve

Article Tags :

Practice Tags :

Misc

Similar Reads

How to add Youtube Videos in Next.js ?

In this article, we are going to learn how we can add Youtube Video in NextJs. NextJS is a React-based framework. It has the power to Develop beautiful Web applications for different platforms like Windows, Linux, and mac. The linking of dynamic paths helps in rendering your NextJS components condit

Youtube Data API for handling videos | Set-4

Prerequisite: Youtube Data API for handling videos | Set-1, Set-2, Set-3 In this article we will discuss two methods related to video: Update a Video, Delete a Video. Updating a video and deleting an uploaded video requires user's authorization, so we will be creating OAuth type of credential for th

Youtube Data API for handling videos | Set-5

Prerequisite: Youtube Data API for handling videos | Set-1, Set-2, Set-3 In this article, we will be discussing Rate a Video and Get Rating of a Video. Examples in this article will be requiring user authorization. So, we will be first creating OAuth Credential and install additional libraries. Foll

Youtube Data API for handling videos | Set-1

Before proceeding further let's have a look at what we have in store for the videos section. Youtube Data API allows to perform following operations on the video: list insert update rate getRating reportAbuse delete Let's discuss how to use Youtube Data API for handling videos. Please follow the ste

How To Autoplay Youtube Video in HTML

To embed and play YouTube videos in HTML, you can use the <iframe> tag with the YouTube embed URL. Furthermore, to autoplay a YouTube video in HTML, you need to add some specific parameters in the URL to control autoplay and muting. Autoplay: (autoplay=1) in the URL automatically starts playin