Youtube player controls & autohide not working

Question

So I added the youtube iframe api to my website and followed the instructions; so this is my code:

var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
  height: '390',
  width: '640', 
  controls: '0',
  autohide: '1',
  videoId: 'I'd rather not display that',
  events: {
//    'onReady': onPlayerReady,
    'onStateChange': onPlayerStateChange
  }
});
}

Setting controls to 0 should not display the player's controls as per this article but it's still showing;

Also setting the autohide to 1 should have the progress bar and controls slide out after a couple of seconds as per this article but that also doesn't work.

Am I doing something wrong?

Answer 1

I got the embed version and the iframe version both autoplaying, autohide (don't really need) and hiding controls. I used the sample code and added in the parameters you needed.

All you need to do is replace your movie id and I think you will be up and running.

Here is the jsfiddle links where you can see it work and grab the code.

Embeded version: http://jsfiddle.net/franktudor/jk9SS/

<object width="640" height="390">
  <param name="movie"
         value="https://www.youtube.com/v/M7lc1UVf-VE?version=3&autoplay=1&autohide=1&controls=0"></param>
  <param name="allowScriptAccess" value="always"></param>
  <embed src="https://www.youtube.com/v/M7lc1UVf-VE?version=3&autoplay=1&autohide=1&controls=0"
         type="application/x-shockwave-flash"
         allowscriptaccess="always"
         width="640" height="390"></embed>
</object>

Here is the iFrame version: http://jsfiddle.net/franktudor/2wh8T/

<iframe id="ytplayer" 
        type="text/html" 
        width="640" 
        height="390" 
        src="http://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&autohide=1&controls=0"
        frameborder="0"/>

Both are options you can use. You are working with the iFrame version...I also recommend that version. But in the event you need another solution the embed version can be used.

Its not that script style but you can use a wrapper if needed.

Here is a link to an HTML5 youtube (and vimeo) video wrapper.

Ok, here is the functional code like your example that I got working: http://jsfiddle.net/franktudor/DU57E/

<div id="player"></div>

<script>
  // 2. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      playerVars: { 'autoplay': 1, 'controls': 0 }, //this is what you need...
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
    event.target.playVideo();
  }

  // 5. The API calls this function when the player's state changes.
  //    The function indicates that when playing a video (state=1),
  //    the player should play for six seconds and then stop.
  var done = false;
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
      setTimeout(stopVideo, 6000);
      done = true;
    }
  }
  function stopVideo() {
    player.stopVideo();
  }
</script>

Answer 2

Just set the variables inside the propertie 'playerVars'.