JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fullscreen-element">
  <video class="main-video" src="https://cdn.jsdelivr.net/npm/big-buck-bunny-1080p@0.0.6/video.mp4" autoplay loop muted type="video/mpeg"></video>
</div>
<button id="fullscreen-btn">Go full screen</button>


<!-- In another area of the html -->

<video class="self-view overlay-element" src="https://cdn.jsdelivr.net/npm/big-buck-bunny-1080p@0.0.6/video.mp4" autoplay loop muted type="video/mpeg"></video>

CSS

.fullscreen-element {
  width: 300px;
  height: 170px;
  position: relative;
}

.main-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.self-view {
  position: absolute;
  bottom: 5%;
  right: 5%;
  width: 30%;
  height: 30%;
}

JavaScript

document.getElementById('fullscreen-btn').addEventListener('click', goFullScreen);

function goFullScreen() {
	var selfView = document.querySelector('.self-view');
  var fsElt = document.querySelector('.fullscreen-element');
  // append the self view inside the fullscreen element
  fsElt.appendChild(selfView);
  var rfs = fsElt.requestFullscreen || fsElt.webkitRequestFullScreen || fsElt.mozRequestFullScreen || fsElt.msRequestFullscreen;
  rfs.call(fsElt);
}