How to properly style the youtube player on the site?

Question

YouTube

Hello everyone, I decided to style the youtube player on my site using the Youtube API.
The bottom line is that using the Youtube API I upload videos to the block, while hiding the standard ui controls and using my own:

spoiler

Based on articles:
1) https://habr.com/post/306726/ - (hereinafter the first link)
2) https://ruseller.com/lessons.php?rub=37&id=2425 - (hereinafter the second link)
Faced with a few problems:
1) How to make when you click on the button fullscreen video?
2) When I double click on the video, it opens in fullscreen, but it overlaps my ui player control panel:

spoiler

html code:

<spoiler title="">div>
        <div class="wrapper-video">
          <div id="video"></div>
        </div>
        <div class="start-img">
          <img src="" alt="">
        </div>
        <div class="big-play"></div>
        <div class="panel-control">
          <div class="control play">
            <div class="play"></div>
            <!-- /.play -->

            <div class="pause"></div>
            <!-- /.pause -->
          </div>
          <!-- /.control -->

          <div class="volume">
            <div class="icon right">
              <div class="left"></div>
              <!-- /.left (Звука нет) -->

              <div class="center"></div>
              <!-- /.center (Звука на середине) -->

              <div class="right"></div>
              <!-- /.right (Звук на максимальной) -->
            </div>
            <!-- /.icon -->

            <div class="line">
              <div></div>
            </div>
            <!-- /.line -->
          </div>
          <!-- /.volume -->

          <div class="progress">
            <span class="time"><span>0:00</span>&nbsp;/&nbsp;<span>0:00</span></span>
            <!-- /.time -->

            <div class="line">
              <div></div>
            </div>
            <!-- /.line -->
          </div>
          <!-- /.progress -->

          <div class="settings"></div>
          <!-- /.settings -->

          <div class="fullscreen full">
            <div class="full"></div>
            <!-- /.full-->

            <div class="no-full"></div>
            <!-- /.no-full-->
          </div>
          <!-- /.fullscreen -->
        </div>
      </div>

for YouTube APi I use the block " " Ui player control panel is in the block " " Please help ) <div id="video"></div>
<div class="panel-control"></div>

Answer 1

Solved the problem with fullscreen using js code:

function toggleFullScreen(elem) {
    	if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) {
    		if (elem.requestFullScreen) {
    			elem.requestFullScreen();
    		} else if (elem.mozRequestFullScreen) {
    			elem.mozRequestFullScreen();
    		} else if (elem.webkitRequestFullScreen) {
    			elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
    		} else if (elem.msRequestFullscreen) {
    			elem.msRequestFullscreen();
    		}
    	} else {
    		if (document.cancelFullScreen) {
    			document.cancelFullScreen();
    		} else if (document.mozCancelFullScreen) {
    			document.mozCancelFullScreen();
    		} else if (document.webkitCancelFullScreen) {
    			document.webkitCancelFullScreen();
    		} else if (document.msExitFullscreen) {
    			document.msExitFullscreen();
    		}
    	}
    }

But there was another problem, when you double click on the Youtube player, it becomes fullscreen and overlaps my panel, how can I block this double click?
So that double-clicking does not open fullscreen, you need to write for the iframe in css:

user-select: none;
pointer-events: none;

Answer 2

Alternatively, if you need to quickly, you can try Plyr , or see how it is implemented there.
You can use your own html for ui in it and there are many options for managing it.