Блог

Я начинающий пользователь JS, и я пытаюсь заставить видео воспроизводиться в полноэкранном режиме и заменить невидимый div дальше по странице. Я начал с руководства от Криса Фердинанди.

В его руководстве видео заменяет изображение, на которое нажимается. Я хотел бы, чтобы div позже был заменен на странице при нажатии.

Любое руководство было бы здорово!

HTML

 <a data-video="480459339" class="stylsheetref" href="#" target="">Watch the Tour</a>
<div id="video-replace"></div>
  

Javascript (модифицированный из этого руководства)

 <script>
   if (!Element.prototype.requestFullscreen) {
    Element.prototype.requestFullscreen = Element.prototype.mozRequestFullscreen || Element.prototype.webkitRequestFullscreen || Element.prototype.msRequestFullscreen;
}

// Listen for clicks
document.addEventListener('click', function (event) {

    //Set invisible Div (new code added by me)
    var videonew = '#video-replace');
 
    // Check if clicked element is a video link
    var videoId = event.target.getAttribute('data-video');
    if (!videoId) return;

    // Create iframe
    var iframe = document.createElement('div');
    iframe.innerHTML = '<p>x</p><iframe width="560" height="960" src="https://player.vimeo.com/video/'   videoId   '?rel=0amp;autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
    var video = iframe.childNodes[1];

    // Replace the image with the video
    event.target.parentNode.replaceChild(video, videonew);

    // Enter fullscreen mode
    video.requestFullscreen();
    
}, false);

</script>

  

В вашем коде есть проблемы.

var videonew = '#video-replace'); поскольку ) вы используете это в методе `replaceChild’, я предполагаю, что вы хотите, чтобы переменная ссылалась на элемент.

Поэтому измените его на

var videonew = document.querySelector('#video-replace');

Профессиональный совет: использование консоли разработчика во время разработки может помочь вам выявить такие ошибки в вашем коде.