title: Failed to execute 'postMessage' on 'DOMWindow': target/origin mismatch http vs https
body: <p>I apologize up front as I'm very confused by my problem. I'm really in a bind because this is causing a problem on my production site.</p>
  
  <p>I have a javascript player on my site which plays through song lists which can be hosted on youtube, soundcloud or vimeo. Yesterday I noticed this error which generally arises anytime you try to load a new song through "skipping" with the player buttons. This error just started in the last day or two. I am not seeing anything new in the youtube api release notes and this error occurs using Chrome, Firefox and Safari, so it is most likely not related to a change in the browser. Something that I am using has changed though, as I have not pushed new code in 18 days.</p>
  
  <p>An example playlist is here: <a href="http://www.muusical.com/playlists/programming-music" rel="nofollow">http://www.muusical.com/playlists/programming-music</a></p>
  
  <p>I think I have isolated the way to reproduce the error, here are the steps:</p>
  
  <ol>
  <li>Play a youtube hosted song.</li>
  <li>Skip to any other song in the list (whether by pressing the skip buttons or directly pressing the play button on the song's row item).</li>
  </ol>
  
  <p>*Note, that if the first song in the playlist is a youtube song, simply skipping to another song even without playing the initially loaded youtube song will produce the error.</p>
  
  <p>Essentially, the error seems to occur once you have loaded and/or played a youtube song and attempt to skip to another song. </p>
  
  <p>Let me know if you find an exception to this behavior.</p>
  
  <p>I see this error in the console:</p>
  
  <pre><code>Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.muusical.com') does not match the recipient window's origin ('http://www.muusical.com').
  </code></pre>
  
  <p>I load the player with using the youtube javascript api:</p>
  
  <pre><code>new YT.Player('playlist-player', {
        playerVars: { 'autoplay': 1, 'fs': 0 },
        videoId: "gJ6APKIjFQY",
        events: {
          'onReady': @initPlayerControls,
          'onStateChange': @onPlayerStateChange
        }
      })
  </code></pre>
  
  <p>Which produces this iframe:</p>
  
  <pre><code>&lt;iframe id="playlist-player" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/gJ6APKIjFQY?autoplay=1&amp;amp;enablejsapi=1&amp;amp;origin=http%3A%2F%2Fwww.muusical.com"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>After hitting skip from the above youtube song, this is what I see loaded in the iframe:</p>
  
  <pre><code>&lt;iframe id="playlist-player" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="360" src=""&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>I support youtube, soundcloud and vimeo songs. It seems like once a youtube song is loaded the "origin" changes from http to https. I don't think it is necessary to include the embedding methods for the other hosts as this error occurs even if the entire playlist is only youtube and it does not occur in a playlist which consists of only songs from soundcloud and vimeo. </p>
  
  <p>Also, this is how I am loading the youtube javascript:</p>
  
  <pre><code>// 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);
  </code></pre>
  
  <p>Please let me know if you need me to clarify anything and thanks in advance for taking a look.</p>