Categories

Embedding a Youtube video using the HTML5 player in an IFRAME - Embed parameters explained

Donate with

82uymVXLkvVbB4c4JpTd1tYm1yj1cKPKR2wqmw3XF8YXKTmY7JrTriP4pVwp2EJYBnCFdXhLq4zfFA6ic7VAWCFX5wfQbCC

Copy Monero Donation Address

Donate with

Donate BAT now

Verified BAT publisher

Howto embed a Youtube video using the HTML5 player within an Iframe on your website

As an example the iframe is being styled a bit by adding some shadows and setting a width and a height

<iframe style="box-shadow: 0 15px 15px -13px #333; -moz-box-shadow: 0 15px 15px -13px #333; -webkit-box-shadow: 0 15px 15px -13px #333; width:652px; height:367px;" 
src="http://www.youtube.com/embed/NPjYSfYYQt4?rel=0&enablejsapi=1&wmode=transparent&autohide=1&controls=2&fs=1&vq=hd720&showinfo=0" frameborder="0" allowfullscreen></iframe>

Embed parameters explained

• rel
  Values: 0 or 1. Default is 1. This parameter indicates whether the player should show related videos when playback of the initial video ends.
• enablejsapi
  Values: 0 or 1. Default is 0. Setting this to 1 will enable the Javascript API.
• wmode
  Values: opaque or transparent 
• autohide
  Values: 2 (default), 1, and 0. This parameter indicates whether the video controls will automatically hide after a video begins playing. The default behavior (autohide=2) is for the video progress bar to fade out while the player controls (play button, volume control, etc.) remain visible.
• controls
  Values: 0, 1, or 2. Default is 1. This parameter indicates whether the video player controls will display.
• fs
  Values: 0 or 1. The parameters controls whether the user can switch to fullscreen mode or not.
• vq
  Values: hd720 or hd1080. Set it to have the video played back in HD automatically.
• showinfo
  Values: 0 or 1. The parameter's default value is 1. If you set the parameter value to 0, then the player will not display information like the video title and uploader before the video starts playing.