Как правильно стилизовать плеер youtube на сайте?

Question

[Егор Астрейко]

Всем привет, решил стилизовать плеер youtube на своем сайте, при помощи Youtube API.
Суть заключается в том, что при помощи Youtube API загружаю в блок видео, при этот скрываю стандартные ui управления и использую свои:

spoiler

Опирался на статьи:
1) https://habr.com/post/306726/ - (далее первая ссылка)
2) https://ruseller.com/lessons.php?rub=37&id=2425 - (далее вторая ссылка)
Столкнулся с несколькими проблемами:
1) Как сделать при нажатии на кнопку fullscreen видео ?
2) При двойном нажатии на видео, оно открывается в fullscreen - е, но при этом перекрывает мою ui панель управления плеером:

spoiler

html код:

<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>

для YouTube APi использую блок "<div id="video"></div>"
Ui панель управления плеером находиться в блоке "<div class="panel-control"></div>"
Просьба помочь )

Comments

[boga-net]

и z-index не спасает для panel-control ?
или transform: translateZ()

было бы неплохо увидеть весь код в песочнице

[Егор Астрейко]

boga-net, не помогает, в песочницу, чуть позже

[frees2]

Стилизация "внутри", стили можно менять, но особо не баловаться, уже комментировал, в архиве есть.

[Егор Астрейко]

frees2, можно подробнее ?

[frees2]

Егор Астрейко, Как правильно вставить видео с сервиса YouTube?

[Егор Астрейко]

frees2, Мне пока только одно нужно да и для добавления можно использовать "player.cueVideoById(id);", а на счет моей проблеме не помогло

Answer 1

[Егор Астрейко]

РЕшил проблему с fullscreen при помощи js кода:

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();
    		}
    	}
    }

Но появилась другая проблема, при двойном клике по Youtube плееру, он становиться fullscreen и перекрывает мою панель, как можно этот двойной клик блокировать ?

Что бы по двойному клику не открывался fullscreen нужно для iframe в css прописать:

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

Comments

[Carburn]

отображай поверх div

Answer 2

[its2easyy]

Как вариант если нужно быстро, можно попробовать Plyr, или посмотреть как там реализовано.
В нем можно для ui использовать свой html и есть много возможностей для управления.

Comments

[Егор Астрейко]

Хах, именно он меня и сподвиг написать свой, так как я раньше думал, что это не возможно )) Но у них почему то все норм, а у меня через одно место (