Javascript 单击按钮将视频添加到页面

我是一个JS新手，我正在尝试在全屏上播放一段视频，并替换页面下方的一个不可见div。我是从一个导游开始的

在他的指南中，视频将替换单击的图像。我想有一个div稍后在页面上被替换的点击

任何指导都会很好

HTML

Javascript（修改自）

if（！Element.prototype.requestFullscreen）{
Element.prototype.requestFullscreen=Element.prototype.mozRequestFullscreen | | | Element.prototype.webkitRequestFullscreen | | Element.prototype.msRequestFullscreen；
}
//倾听点击声
document.addEventListener（'click'，函数（事件）{
//设置不可见Div（我添加的新代码）
var videonew='#video replace'）；
//检查单击的元素是否为视频链接
var videoId=event.target.getAttribute（'data-video'）；
如果（！videoId）返回；
//创建iframe
var iframe=document.createElement（'div'）；
iframe.innerHTML='x
'；
var video=iframe.childNodes[1]；
//用视频替换图像
event.target.parentNode.replaceChild（video，videonew）；
//进入全屏模式
video.requestFullscreen（）；
}，假）；

您的代码中存在问题

var videonew='#video replace'）有一个孤立的
）
，因为您在“replaceChild”方法中使用它，我假设您希望变量引用元素

所以把它改成

var videonew=document.querySelector（“#video replace”）

专业提示：在开发过程中使用开发人员控制台可以帮助您找出代码中的此类错误。
代码中存在问题

var videonew='#video replace'）有一个孤立的
）
，因为您在“replaceChild”方法中使用它，我假设您希望变量引用元素

所以把它改成

var videonew=document.querySelector（“#video replace”）

专业提示：在开发过程中使用开发人员控制台可以帮助您找出代码中的此类错误

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

<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=0&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>