JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="https://vjs.zencdn.net/7.8.4/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.8.4/video.js"></script>
<h1>
  Hi
</h1>
<div class="video-image">
  <video poster="https://cdn.pixabay.com/photo/2020/08/12/09/21/sunflowers-5482116_960_720.jpg" data-src="https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8"></video>
  <button>
    Play
  </button>
</div>
<div id="hidden-wrapper" class="hidden-wrapper">
      <video id="hidden-video" class="video-js" poster="https://cdn.pixabay.com/photo/2020/08/12/09/21/sunflowers-5482116_960_720.jpg">
        <source id="video-src"></source>
      </video>
    </div>

CSS

.video-image{
  position:relative;
}
.video-image video{
  width:200px;
  height:200px;
}
.video-image button{
  position:absolute;
  top:120px;
  left:20px;
}
.hidden-wrapper{
  display:none;
  padding-bottom:200px;
}
#hiddem-video{
  width:200px;
  height:200px;
}
.container {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
            justify-content: center;
    -webkit-box-align: center;
            align-items: center;
    height: 100%;
    position: relative;
    }

    #my-video {
    box-shadow: 0 0 20px 0px black;
    min-width: 80%;
    min-height: 80%;
    }

    .contentMenu {
    position: relative;
    width: 4em;
    }
    .contentMenu .icon {
        width: 100%;
        bottom: 0;
        position: absolute;
        padding: 10px;
        text-align: center;
        color: white;
    }
    .contentMenu .icon{
        bottom:-13px;
        font-size:20px;
    }
    .contentMenu .icon:hover {
    cursor: pointer;
    color: gray;
    }
    .contentMenu .icon:hover + .menu {
    -webkit-transform: translate(-50%, -30px);
            transform: translate(-50%, -30px);
    visibility: visible;
    opacity: 1;
    }
    .contentMenu .menu {
    position: absolute;
    bottom: 20px;
    left: 50%;
    -webkit-transition: all 200ms;
    transition: all 200ms;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
            flex-direction: column-reverse;
    width: 100px;
    -webkit-transform: translate(-50%, -20px);
            transform: translate(-50%, -20px);
    visibility: hidden;
    opacity: 0;
    }
    .contentMenu .menu:hover {
    -webkit-transform: translate(-50%, -30px);
            transform: translate(-50%, -30px);
    visibility: visible;
    opacity: 1;
    }
    .contentMenu .menu:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    bottom: -15px;
   ...

JavaScript

function bindPlayVideo(target) {
  var src = target.data('src');
  console.log(src);
}
var player
$('button').on('click', function(ev) {
  $('.hidden-wrapper').css('display', 'block')
  var src = $(ev.currentTarget).parent().find('video').data('src');
  console.log(src)
  var playerOptions = {
    autoplay: false,
    preload: 'auto',
    controls: true,
    sources: [{
      src: src,
      type: "application/x-mpegURL",
      withCredentials: false
    }],
  }
  var isSafari = !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/);
  if (isSafari) {
    playerOptions.muted = true;
  }
  player = videojs('hidden-video', playerOptions);
	player.width(480)
  player.height(270)
  function createNewVideoEl(){
        var videoEl = document.createElement('video')
        videoEl.id = 'hidden-video';
        videoEl.classList.add('video-js')
        $('.hidden-wrapper').css('display','none')
        document.getElementById('hidden-wrapper').append(videoEl)
    }
  player.one("loadedmetadata", () => {
        let resolutions = player.vhs.representations();

        crearBotonesresolutions({
            class: "item",
            resolutions: resolutions,
            father: player.controlBar.el_
        });
        
        // ---------------------------------------------- //

        function crearBotonAutoresolution(params) {
            console.log(params)
            let button = document.createElement("div");

            button.id = "auto";
            button.innerText = `Auto`;

            button.classList.add("selected");

            if (params && params.class) button.classList.add(params.class);

            button.addEventListener("click", () => {
                removeSelected(params);
                button.classList.add("selected");
                resolutions.map(resolution => resolution.enabled(true));
            });
            
            return button;
        }

        function crearBotonesresolutions(params) {
        
            let...