How to Embed YouTube video in Iframe

We can embed youtube video using iframe tag and also can use various attributes. We can use these attributes for different purposes like hide or show video title, automatically play a video or many more.
The following tag will embed our youtube video:

<iframe src=”youtube_url” height=”400″ width=”600″ frameborder=”0″ allowfullscreen></iframe>

Example:

<iframe src="http://www.youtube.com/embed/ryWmrbQ9OoM" 
height="400" width="600" frameborder="0" allowfullscreen></iframe>

We can use following tags with youtube_url:

  Autoplay:

This tag will play the video automatically when page loaded. We can use this tag as following:

<iframe width="640" height="480" 
src="http://www.youtube.com/embed/ryWmrbQ9OoM?
autoplay=1" frameborder="0" allowfullscreen></iframe>

If we use autoplay=1 then this will play video automatically and if we use autoplay=0 then it will not play video by default.

Controls:

If we want to hide the control buttons(play/pause, volume etc.) then we will use the ‘control’ tag. WE can use it as follows –

<iframe width="640" height="480" 
src="http://www.youtube.com/embed/ryWmrbQ9OoM?
autoplay=1& control=0" frameborder="0" 
allowfullscreen></iframe>

To hide the control buttons we use “0″ and “1″ is bydefault.

Showinfo:

This tag is used to show or hide the info of the video. To hide the info we will use the tag as follows –

<iframe width="640" height="480"
src="http://www.youtube.com/embed/ryWmrbQ9OoM?
autoplay=1&contrils=0& showinfo=0" frameborder="0" 
allowfullscreen></iframe>

“0″ is used to remove the info of the video and “1″ is bydefault.

Rel:

The ‘rel’ tag is used to show the related videos after the end og the video. The “0″ will prevent the videos from shown and “1″ is by default allow for shown relative videos. The tag is used like this –

<iframe width="640" height="480" 
src="http://www.youtube.com/embed/ryWmrbQ9OoM?
autoplay=1&contrils=0& showinfo=0&rel=0" frameborder="0" 
allowfullscreen></iframe>

    Autohide:

Auto hide has three values, “2″ is the default and progrees bar fade out when controls remaining visible, “1″ which hides the progress bar and controls after few seconds and “0″ will shows progress bar and controls always.

We can use this tag as bellow –

<iframe width="640" height="480" 
src="http://www.youtube.com/embed/ryWmrbQ9OoM?
autoplay=1&contrils=0&showinfo=0&rel=0&
autohide=0" frameborder="0" allowfullscreen></iframe>

    Color:

The color parameter define the color of progress bar’s amount which user has already seen. ‘white ’and ‘red’ are the valid colors.

This tag is used as shown below –

<iframe width="640" height="480" 
src="http://www.youtube.com/embed/ryWmrbQ9OoM?autoplay=1&
contrils=0&showinfo=0& rel=0&autohide=2&color=red" 
frameborder="0" allowfullscreen></iframe>

   Disablekb:

This tag is used to able or disable the keyboard controls. Value “0″ will disable the keyboard controls and “1″ will enable the controls.

Keyboard controls are as follows –

Spacebar: Play / Pause
Arrow Left: Jump back 10% in the current video
Arrow Right: Jump ahead 10% in the current video
Arrow Up: Volume up
Arrow Down: Volume Down

The tag is used like shown below –

<iframe width="640" height= “480" 
src="http://www.youtube.com/embed/ryWmrbQ9OoM?autoplay=1&
contrils=0&showinfo=0&rel=0& autohide=2&color=red&
disablekb=1" frameborder="0" allowfullscreen></iframe>

    End:

This parameter specifies the time, measured in seconds from the start of the video, when the player should stop playing the video.

The time is measured from the beginning of the video and not from either the value of the start player parameter or the startSeconds parameter, which is used in YouTube Player API functions for loading or queueing a video. We can pass positive integer values in its parameter where the video should stop.

This will stop the video <iframe width=”640″ height=”480″
src=”http://www.youtube.com/embed/ryWmrbQ9OoM?autoplay=1&
contrils=0&showinfo=0& rel=0&autohide=2&color=red&
end=5″ frameborder=”0″ allowfullscreen></iframe>

after 5 seconds.

    Theme:

This parameter indicates that the embedded player will display player controls (like a play button or volume control) within a dark or light control bar. Valid parameter values are dark and light and by default, the player will display player controls using the dark theme.

The parameter used as follows:

<iframe width="640" height="480" 
src="http://www.youtube.com/embed/ryWmrbQ9OoM?autoplay=1&
contrils=0&showinfo=0&rel=0& autohide=2&color=red&
theme=light" frameborder="0" allowfullscreen></iframe>

    Start:

This parameter begin the video at the given number of seconds from the start of the video. Values should be positive integer number.

The example shown below –

<iframe width="640" height="480" 
src="http://www.youtube.com/embed/ryWmrbQ9OoM?autoplay=1&
contrils=0&showinfo=0&rel=0& autohide=2&color=red&
start=10" frameborder="0" allowfullscreen></iframe>

This will play video from 10 seconds.

     Fs:

We can pass 0 or 1 in this tag. The default value is 1, which causes the fullscreen button to display. Setting this parameter to 0 prevents the fullscreen button from displaying.

<iframe width="640" height="480" 
src="http://www.youtube.com/embed/ryWmrbQ9OoM?autoplay=1&
contrils=0&showinfo=0&rel=0& autohide=2&color=red&fs=0" 
frameborder="0" > </iframe>

    Loop:

In this tag 0 or 1 values can be passed. Default is 0. In the case of a single video player, a setting of 1 will cause the player to play the initial video again and again. In the case of a playlist player (or custom player), the player will play the entire playlist and then start again at the first video.

<iframe width="640" height="480" 
src="http://www.youtube.com/embed/ryWmrbQ9OoM?autoplay=1&
contrils=0&showinfo=0&rel=0& autohide=2&color=red&
loop=0" frameborder="0" allowfullscreen> </iframe>

    Modestbranding:

This parameter lets you use a YouTube player that does not show a YouTube logo. Set the parameter value to 1 to prevent the YouTube logo from displaying in the control bar. Note that a small YouTube text label will still display in the upper-right corner of a paused video when the user’s mouse pointer hovers over the player.

<iframe width="640" height="480" 
src="http://www.youtube.com/embed/ryWmrbQ9OoM?autoplay=1&
contrils=0&showinfo=0&rel=0& autohide=2&color=red&
modestbranding=0" frameborder="0" allowfullscreen> </iframe>