Задать вопрос
@Egor1324
javascript

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

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

spoiler
5b1570aea7e94056046959.png


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

spoiler
5b1570dcc1713369688970.png


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>"
Просьба помочь )
  • Вопрос задан
  • 2799 просмотров
6 комментариев
Подписаться 14 Простой 6 комментариев
Решения вопроса 1
@Egor1324 Автор вопроса
РЕшил проблему с 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;
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 1
@its2easyy
Как вариант если нужно быстро, можно попробовать Plyr, или посмотреть как там реализовано.
В нем можно для ui использовать свой html и есть много возможностей для управления.
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Графический дизайнер
18 апр. 2024, в 07:58
500 руб./в час
Разработать мини-приложение Windows 7-11, Linux,Macos
18 апр. 2024, в 07:22
45000 руб./за проект
Каталог AI tools
18 апр. 2024, в 01:12
150000 руб./за проект
Ещё заказы