Виджет с видео

Видео: https://youtu.be/EAekusN-ThQ

Код, который надо объединить в секцию:

<div class="modal-video-maker">
  </div>

Код, который нужен для работы

<style>
  .popup-video .block-item,.click-register {
  position:fixed;
  left:15px;
  bottom:15px;
  width:250px;
  transition:.1s;
  z-index:1000;
}

  .click-register {
 z-index:999;
  aspect-ratio: 9/16;
}
  .click-register.expanded {width:350px;}
  .video-js {
z-index:10001;
}
.popup-video .vjs-control-bar {
  display:none;
}
.block-video.expanded {
  width:350px;
}
.popup-video video{
  border:2px solid white;
  border-radius:6px;
}
.block-video svg {
  position:absolute;
  right:-2em;
  top:0;
}
</style>
<script>
	Array.from(document.querySelectorAll('.modal-video-maker')).map((e) => {
		e.closest('.blocks-section').classList.add('popup-video')
})

Array.from(document.querySelectorAll('.popup-video')).map((e) => {
e.querySelector('video').setAttribute('controls', 'true')
		e.querySelector('video').setAttribute('playsinline', '')
		e.querySelector('video').setAttribute('muted', 'true')
	e.querySelector('video').setAttribute('autoplay', 'true')
	e.querySelector('.block-item').onclick =() => {
  e.querySelector('.block-item').classList.toggle('expanded');
			if ( e.querySelector('video').getAttribute('muted')==='muted') 
  {
  e.querySelector('button[title="Unmute"]').click();
 e.querySelector('video').play();
  e.querySelector('.block-item').classList.add('expanded');
		}
	};
})
  document.querySelector('body').insertAdjacentHTML('beforeend','<div class="click-register"></div>') 
 
 document.querySelector('.click-register').onclick = () => {
  document.querySelector('.click-register').classList.toggle('expanded');
  		if ( document.querySelector('.popup-video video').getAttribute('muted')==='muted') {
      document.querySelector('.popup-video button[title="Unmute"]').click()
}
  else {
document.querySelector('.popup-video .block-item').classList.toggle('expanded');
  }
}    
 
var ua = navigator.userAgent.toLowerCase();
var is_safari = (ua.indexOf("safari/") > -1 && ua.indexOf("chrome") < 0);
if(is_safari) {
    var video = document.querySelector('.popup-video video');
    setTimeout(function() {
       video.play();
    }, 50);
                                                                     
}      
                                                                         
document.querySelector('.popup-video .block-item').insertAdjacentHTML('beforeend',`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.1211 11.9998L18.0001 8.11682C18.2519 7.83058 18.3853 7.45918 18.3732 7.07811C18.361 6.69705 18.2042 6.33491 17.9346 6.06532C17.665 5.79573 17.3029 5.63891 16.9218 5.62674C16.5407 5.61458 16.1693 5.74797 15.8831 5.99982L12.0001 9.87882L8.11008 5.98782C7.97074 5.84849 7.80533 5.73796 7.62329 5.66256C7.44124 5.58715 7.24612 5.54834 7.04908 5.54834C6.85203 5.54834 6.65691 5.58715 6.47487 5.66256C6.29282 5.73796 6.12741 5.84849 5.98808 5.98782C5.84874 6.12715 5.73822 6.29256 5.66281 6.47461C5.58741 6.65666 5.5486 6.85177 5.5486 7.04882C5.5486 7.24587 5.58741 7.44098 5.66281 7.62303C5.73822 7.80508 5.84874 7.97049 5.98808 8.10982L9.87908 11.9998L6.00008 15.8818C5.84795 16.0178 5.72517 16.1834 5.63924 16.3685C5.55331 16.5536 5.50605 16.7542 5.50034 16.9582C5.49463 17.1621 5.5306 17.3651 5.60604 17.5547C5.68148 17.7443 5.79481 17.9165 5.9391 18.0608C6.08338 18.2051 6.25558 18.3184 6.44517 18.3939C6.63476 18.4693 6.83775 18.5053 7.04172 18.4996C7.24569 18.4938 7.44635 18.4466 7.63142 18.3607C7.81649 18.2747 7.98209 18.1519 8.11808 17.9998L12.0001 14.1208L15.8781 17.9998C16.1595 18.2812 16.5411 18.4393 16.9391 18.4393C17.337 18.4393 17.7187 18.2812 18.0001 17.9998C18.2815 17.7184 18.4396 17.3368 18.4396 16.9388C18.4396 16.5409 18.2815 16.1592 18.0001 15.8778L14.1211 11.9998Z" fill="#374957"/>
</svg>
`);                                                          document.querySelector('.popup-video .block-item svg').onclick = () => {
document.querySelector('.popup-video .block-item').remove()
}       
</script>

<style>
.video-container {
    padding-top: calc(16 / 9 * 100%);
}</style>