WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

HTML YouTube Videos


It is very very simple to play video to Html using Youtube.


YouTube Video Id

YouTube will display an id (like XGSy3_Czz8k), when you save (or play) a video.

You can use this id, and refer to your video in HTML.


Playing a YouTube Video in HTML

To play your video on a web page, do the following:

  • Upload the video to YouTube
  • Take a note of the video id
  • Define an <iframe> element in your web page
  • Let the src attribute point to the video URL
  • Use the width and height attributes to specify the dimension of the player
  • Add any other parameters to the URL

Example - Using iFrame (the recommended method)

<iframe width="420" height="315"
src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1">
</iframe>
Try it yourself »

YouTube Parameters

autohide

Value 0: The player controls are always visible.

Value 1: The player controls hides automatically when the video plays.

Value 2 (default): If the player has 16:9 or 4:3 ratio, same as 1, otherwise same as 0.

autoplay

Value 0 (default): The video will not play automatically when the player loads.

Value 1: The video will play automatically when the player loads.

controls

Value 0: Player controls does not display. The video loads immediately.

Value 1 (default): Player controls display. The video loads immediately.

Value 2: Player controls display, but the video does not load before the user initiates playback. 

loop

Value 0 (default): The video will play only once.

Value 1: The video will loop (forever).

playlist

A comma separated list of videos to play (in addition to the original URL).


YouTube <object> Embeds

YouTube <object> embeds were deprecated from 2018.

You should use migrate your applications to use <iframe> embeds.

Example - Using <object> (deprecated)

<object width="420" height="315"
data="http://www.youtube.com/embed/XGSy3_Czz8k">
</object>
Try it yourself »

Example - Using <embed> (deprecated)

<embed width="420" height="315"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
Try it yourself »