title: inside Iframe, Youtube player unmute function stops working
body: <p>Before flagging this as duplicate please read the details. </p>
  
  <p>I have the youtube player autoplays MUTED inside an iframe and have an unmute button and I am calling unMute() on pressing the button. However I get this error:</p>
  
  <p>Unmuting failed and the element was paused instead because the user didn't interact with the document before</p>
  
  <p>this is the player code :</p>
  
  <pre><code>try {
        new YT.Player('ytplayer', {
          height: '100%',
          width: '100%',
          videoId: this.config.mediaId,
          playerVars: {
            modestbranding : 1,
            rel : 0,
            showinfo : 0,
            autoplay: 1,
            color: 'white',
            rel: 0,
            playsinline: 1,
            controls: 0
          },
          events: {
            onReady: this.onPlayerReady.bind(this)
          }
        });
      } catch(e) {
        showErrorScreen(e);
      }
  
  onPlayerReady(event) {
      this.playerRef = event.target;
      this.playerRef.mute();
      this.playerRef.playVideo(); // because autoplay: 1 sometimes does not work
  
    }
  
  ...
  const unmute = (event) =&gt; {
      playerRef.unMute();
      state.muted = false;
      updateVolumeControls();
    };
  </code></pre>
  
  <p>Here the link to the page:</p>
  
  <p><a href="https://video.inpwrd.net/college-prep-dont-go-it-alone/48ebe783-bcc4-4b96-9ba5-aff3db5f13df" rel="nofollow noreferrer">https://video.inpwrd.net/college-prep-dont-go-it-alone/48ebe783-bcc4-4b96-9ba5-aff3db5f13df</a></p>
  
  <p>Outside iframe it works. This is definitely a bug in youtube player code. I am sticking to autoplay muted policy. I believe they have this assumption that the player is always in the root document. This is the stack trace:</p>
  
  <p>Unmuting failed and the element was paused instead because the user didn't interact with the document before</p>
  
  <pre><code>g.h.xk  @   base.js:6951
  jya @   base.js:4586
  yQ  @   base.js:4585
  Fna @   base.js:3091
  g.h.unMute  @   base.js:6718
  a.F.(anonymous function)    @   base.js:3082
  g.h.handleExternalCall  @   base.js:6698
  a.C.(anonymous function)    @   base.js:3086
  (anonymous) @   www-embed-player.js:526
  k.la    @   www-embed-player.js:609
  k.La    @   www-embed-player.js:598
  ii.B    @   www-embed-player.js:594
  </code></pre>
  
  <p>Please don't give hacky solutions that work today and stop working tomorrow.</p>