JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <video id="large-video" src="https://cdn.jsdelivr.net/npm/big-buck-bunny-1080p@0.0.6/video.mp4" autoplay loop muted type="video/mpeg"></video>
  <video id="small-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>

CSS

#container {
  width: 300px;
  height: 170px;
  position: relative;
}

#large-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#small-video {
  position: absolute;
  bottom: 5%;
  right: 5%;
  width: 30%;
  height: 30%;
}

JavaScript

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

function goFullScreen() {
  var video = document.getElementById('container');
  var rfs = video.requestFullscreen || video.webkitRequestFullScreen || video.mozRequestFullScreen || video.msRequestFullscreen;
  rfs.call(video);
}