title: Picture in picture and FullScreen together - API can only be initiated by a user gesture
body: <p>I am running two video on top of one another like this picture : </p>
  
  <p><a href="https://i.stack.imgur.com/KMQ69.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KMQ69.png" alt="video player demo"></a></p>
  
  <p>There is a button named 'Enter FullScreen'. When someone click that button,i want to do two things.</p>
  
  <ol>
  <li>Video Player 2 will be set as picture-in-picture and</li>
  <li>Video Player 1 will be set as fullscreen.</li>
  </ol>
  
  <p>I can do either fullscreen or picture-in-picture, but can't do fullscreen and picture-in-picture together. Error throws like this: </p>
  
  <blockquote>
    <p>Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.<br>
    Uncaught (in promise) TypeError: fullscreen error</p>
  </blockquote>
  
  <p>I am using jQuery and here is my sample code:</p>
  
  <pre><code>$('.enter-full-screen').click(event =&gt; {
    event.stopImmediatePropagation();
    event.stopPropagation();
  
    let pipResponse = $('#video-player-2')[0].requestPictueInPicture();
  
    pipResponse.then(() =&gt; {
      $('#video-player-1')[0].requestFullscreen() // Note: I am using a browser prefixes
        .then(/* ... */)
        .catch(/* ... */);
    })
  });
  </code></pre>
  
  <p><strong>Update: 07.01.2020:</strong> I tried request both simultaneously, but it doesn't work also. It works for only one which i request first.</p>
  
  <pre><code>let pipResponse = $('#video-player-2')[0].requestPictueInPicture();
  let fullscreenResponse = $('#video-player-1')[0].requestFullscreen();
  
  Promise.all([pipResponse, fullscreenResponse])
      .then(/* code */)
      .catch(/* code */);
  </code></pre>
  
  <p>In this case only pip works and fullscreen request throws an error. If i request fullscreen first, then only fullscreen works - pip throws an error.</p>
  
  <blockquote>
    <p>I tried with jQuery <code>trigger('click')</code> for automatic triggering another click event along with one. Works for only one(pip or fullscreen), BUT DOESN'T WORK BOTH TOGETHER!</p>
  </blockquote>
  
  <p>I really appreciate your help.</p>