HTML | Adding Youtube videos - GeeksforGeeks

18 Sep, 2018
In the early days, 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 webpages.
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.
Upload the video that you want to embed on your webpage on YouTube.Copy the video id of the video.Use 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.
Upload the video that you want to embed on your webpage on YouTube.
Copy the video id of the video.
Use 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”.The first value in the box is the Video ID.
Open the youtube video whose Id you want.
Right click on the video, from the menu select “Stats for nerds”.
The first value in the box is the Video ID.
The video id of this video is : il_t1WVLNxk
<!DOCTYPE html><html><body>  <iframe height="480" width="500"  src="https://www.youtube.com/embed/il_t1WVLNxk"></iframe>  </body></html>
Output :
Enabling YouTube autoplay 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.
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.
<!DOCTYPE html><html><body>  <iframe height="480" width="500" src="https://www.youtube.com/embed/il_t1WVLNxk?autoplay=1"></iframe>  </body></html>
Output :
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.
Value 1 : The video will keep on looping again and again.
Value 0 (default case) : The video plays only once.
<!DOCTYPE html><html><body>  <iframe height="480" width="500"   src="https://www.youtube.com/embed/il_t1WVLNxk/           AS_dAPN1Dlk?playlist=AfxHGNRtFac&loop=1"></iframe>  </body></html>
Output :
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.
Value 1 (default case) : Player controls are displayed.
Value 0 : Player controls are not displayed.
For Enabling Controls :
<!DOCTYPE html><html><body>  <iframe  width="440" height="372" src="https://www.youtube.com/embed/il_t1WVLNxk/?controls=1"></iframe>  </body></html>
Output :
For Disabling Controls :
<!DOCTYPE html><html><body>  <iframe  width="440" height="372" src="https://www.youtube.com/embed/il_t1WVLNxk/?controls=0"></iframe>  </body></html>
Output :
<!DOCTYPE html><html><body>  <object width="480" height="500"data="https://www.youtube.com/embed/il_t1WVLNxk"></object>  </body></html>
Output :
<!DOCTYPE html><html><body>  <embed width="480" height="500"src="https://www.youtube.com/embed/il_t1WVLNxk">  </body></html>
Output :
Note: Nowadays, the object and the embed tag are not appreciated, therefore it is recommended to use the iframe tag.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
prakhar7
HTML
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
How to Insert Form Data into Database using PHP ?
CSS to put icon inside an input element in a form
REST API (Introduction)
Types of CSS (Cascading Style Sheet)
Roadmap to Become a Web Developer in 2022
How to fetch data from an API in ReactJS ?
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript