Nowadays it is popular to add videos to websites, and being improved in sense of media friendly, the HMTL5 definitely supports and facilitates such implementations.

Generally speaking adding a YouTube video to your website may be done by using one of the following three elements:

Syntax - <iframe>

<iframe width="" height=""
        src="http://www.youtube.com/embed/videoname?autoplay=1">
</iframe>

Syntax - <object>

The element <object> is a very important element in HTML 4, and it almost completely replaced <iframe> element in that duty. In the matter effect, the <iframe> element in HTML4 Strict definition was deprecated. However, although <object> tag is better option, the <iframe> has been re-introduced in HTML 5. 

<object width="" height=""
        data="http://www.youtube.com/embed/videoname?autoplay=0">
</object>

Syntax - <embed />

The other way of embedding the YouTube in an HTML document would be by using the <embed> element. That element had been re-introduced back in HTML5.

<embed width="" height=""
        src="http://www.youtube.com/embed/videoname?autoplay=1">

Syntax - <video>

The truly follow HTML5 idea, perhaps the best way is to use the newly introduced <video> element. However as for now in order to add YouTube videos to your site with the <video> element, we must implement an API that handles the wrapper (media lbrary) for us. Below example only explains the basic syntax, but we suggest to use one of the methods described above.

<video width="" height="" id="player1" preload="none">

    <source type="video/youtube" src="http://www.youtube.com/videoname? autoplay=1" />

</video>

YouTube player parameters

In above examples we saw a variable being added to the ‘videoname’ (presenting the name of the YouTube video we are embedding). That extended variable (videoname?autoplay=1) is a way to ‘tell’ the YouTube player how to play the video clip. Below we can find other important parameters that may be added to the YouTube based video clip.

  • autoplay; Value ‘0’ (default) will prevent automatic start of the video when the player loads while value ‘1’ will do the opposite, that is it will start playing the video as soon as it loads
  • autohide; Value ‘0’  will have the video controls always visible, value ‘1’ will hide the controls once the video starts playing and value ‘2’ (default) will be identical as value ‘1’ in case of video being 16:9 or 4:3 ratio, or else will be same as value ‘0’
  • loop; Value ‘0’ (default) makes video playing one time, while value ‘1’ will make it play in an infinite loop
  • controls; Value ‘0’ will remove the controls while the video starts immediately, value ‘1’ (default) will display the controls and the video will also start immediately, value ‘2’ will also display the controls, but the video will not play till the user initiates it
  • playlist; This value is a comma separated list of videos that will be played after the initial video finishes
  • start & end; Start and end points (?start&end) will define the beginning and the end point of the video we want to play (and will cut the rest)

Example

How to embed YouTube video into your document example:

 

›› go to examples ››