Chromeless and autoplay not working

Question

Having problems getting a Chromeless player with autoplay to work. The code I am trying was copied directly from the developers.google.com documentaiton: https://developers.google.com/youtube/youtube_player_demo

IFRAME Example: http://jsfiddle.net/BN6Sa/

<iframe width="720" height="405" src="//www.youtube.com/embed/M7lc1UVf-VE?feature=player_embedded&autoplay=1&controls=0&loop=1&modestbranding=1&rel=0&showinfo=0&theme=light" frameborder="0" allowfullscreen></iframe>

JS Example: http://jsfiddle.net/7DWTU/

<div id="ytplayer"></div>

<script>
  // Load the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // Replace the 'ytplayer' element with an <iframe> and
  // YouTube player after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
    height: '405',
    width: '720',
    videoId: 'M7lc1UVf-VE',
    autoplay:1,
    controls:0,
    loop:1,
    rel:0,
    showinfo:0,
    theme:'light'
    });
  }
</script>

jlmcdonald jlmcdonald · Accepted Answer · 2013-12-01T05:20:07

When using the iFrame API, anything that's a player object parameter (i.e. something that you might append as a URL parameter if you were to embed the player just as an iFrame rather than with the API) needs to be set as part of the playerVars parameter object rather than as a direct parameter to the YT.Player argument. Specifically, your code should look like this:

<div id="ytplayer"></div>

<script>
  // Load the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // Replace the 'ytplayer' element with an <iframe> and
  // YouTube player after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
     height: '405',
     width: '720',
     videoId: 'M7lc1UVf-VE',
     playerVars: {
      autoplay:1,
      controls:0,
      loop:1,
      rel:0,
      showinfo:0,
      theme:'light'
      }
    });
  }
</script>

Chromeless and autoplay not working

1 Answers