Picture in picture and FullScreen together - API can only be initiated by a user gesture

I am running two video on top of one another like this picture :

There is a button named 'Enter FullScreen'. When someone click that button,i want to do two things.

1. Video Player 2 will be set as picture-in-picture and
2. Video Player 1 will be set as fullscreen.

I can do either fullscreen or picture-in-picture, but can't do fullscreen and picture-in-picture together. Error throws like this:

>Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
>Uncaught (in promise) TypeError: fullscreen error

I am using jQuery and here is my sample code:

$('.enter-full-screen').click(event => {
  event.stopImmediatePropagation();
  event.stopPropagation();

  let pipResponse = $('#video-player-2')[0].requestPictueInPicture();

  pipResponse.then(() => {
    $('#video-player-1')[0].requestFullscreen() // Note: I am using a browser prefixes
      .then(/* ... */)
      .catch(/* ... */);
  })
});

Update: 07.01.2020: I tried request both simultaneously, but it doesn't work also. It works for only one which i request first.

let pipResponse = $('#video-player-2')[0].requestPictueInPicture();
let fullscreenResponse = $('#video-player-1')[0].requestFullscreen();

Promise.all([pipResponse, fullscreenResponse])
    .then(/* code */)
    .catch(/* code */);

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.

> I tried with jQuery trigger('click') for automatic triggering another click event along with one. Works for only one(pip or fullscreen), BUT DOESN'T WORK BOTH TOGETHER!

I really appreciate your help.

I'm not sure if the picture-in-picture (PiP) API is the right tool for this job - the fullscreen and PiP behaviour seem to be mutually exclusive in this case.

Since you're already emulating the PiP behaviour (as shown in your picture) you should be able to take the same approach when going fullscreen.

Instead of trying to make the individual video elements fullscreen/PiP, make a single common parent element of both videos fullscreen. Then you can just position the small video on top of the large one (as you're already doing) to give the picture-in-picture effect.

<!-- 1. Give the video players a common ancestor -->
<div id="video-group">
	<div id="video-player-1">...</div>
	<div id="video-player-2">...</div>
</div>


$('.enter-full-screen').click(event => {
	event.stopImmediatePropagation();
	event.stopPropagation();
	
	// 2. Make the ancestor element fullscreen, not the videos themselves
	$('#video-group')[0].requestFullscreen()
		.then(/* ... */)
		.catch(/* ... */);
});

Here is a quick-and-dirty example doing "picture-in-picture" with two YouTube videos:

<button type="button"
	onclick="document.querySelector('#video-group').requestFullscreen();">
	Enter fullscreen
</button>

<div id="video-group">
	<iframe style="position: absolute"
	width="100%" height="100%" 
	src="https://www.youtube.com/embed/9bZkp7q19f0" frameborder="0"
	allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

	<iframe style="position: absolute; bottom: 0; right: 0;"
	width="560" height="315"
	src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" 
	allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>