Правка всплывающего плеера YouTube

346

08 января 2017, 19:12

Использую такую конструкцию для просмотра видео. Очень удобно и сокращается время загрузки страницы.

document.getElementById("video").onclick = function() { 
	var id = this.dataset.id; 
	theIframe = document.createElement('iframe'); 
	theIframe.src = '//www.youtube.com/embed/' + id + '?rel=0&autoplay=1&showinfo=0'; 
	theIframe.onclick = function () {this.parentElement.removeChild(this);}; 
	this.parentNode.insertBefore(theIframe, this.nextSibling); 
}

.video-block { 
  width: 280px; 
  height: 160px; 
  margin: 30px auto; 
  background-position: center; 
  background-size: cover; 
  cursor: pointer; 
} 
#video + iframe { 
    position: fixed; 
    z-index: 11; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    border: solid rgba(0,0,0,.9); 
    border-width: 8vh 5vw; 
    cursor: pointer; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
<div class="video-block" id="video" data-id="xcJtL7QggTI" style="background-image: url(//img.youtube.com/vi/xcJtL7QggTI/mqdefault.jpg)"></div>

При вставке кода сюда, почему-то постоянно меняется id, но не суть важно, общий принцип понятен.

Тут есть рабочий вариант этого кода.

Вопросов в общем-то два. Как добавить возможность развернуть видео на всю ширину экрана? Если добавить в theIframe.src allowfullscreen, ничего не меняется.

Второй вопрос, добавление кнопки/иконки закрыть. Можно ли её добавить каким-то способом при нынешнем коде? Или необходимо перед созданием iframe создать блок в который будет вложен плеер и уже блоку задать стиль затемнения, кнопку закрывания блока и т.д.? Как лучше и проще реализовать этот момент?

Заранее спасибо!

Answer 1

Дело в том, что у вас в iframe нету разрешения на разворачивание. Вам нужно добавить эту строку в открытие iframe: theIframe.setAttribute("allowfullscreen", "true")

Вот рабочий пример: jsfiddle-e7mx3ze0