Question

我添加了在网站上的Lightbox中显示youtube视频的功能。但是，我发现可以解决此问题的代码在Lightbox上没有关闭（X）。虽然可以通过单击蒙版上的任意位置来关闭它，但我认为并非所有网络用户都可以意识到这一点，因此我添加了一个简单的

<a href="#" class="x">x</a>

进入灯箱div。尽管实际上确实在灯箱上提供了功能关闭（X），但它具有不受欢迎的效果，当灯箱关闭时，页面又回到了顶部。

我理想的情况是让Lightbox完全关闭，并且页面保持与打开时相同的位置，如果我只是单击蒙版，就会发生这种情况。

我可以看到有一个注释为“ //单击时隐藏灯箱”的部分，但是我不知道如何使（X）也触发相同的动作。

这是使用的完整脚本。

<div id="youtubelightbox" class="parent"><a href="#" class="x">x</a>
  <div class="centeredchild">
    <div class="videowrapper">
      <div id="playerdiv"></div>
    </div>
  </div>
</div>

<script>
// load Youtube API code asynchronously
var tag = document.createElement('script')
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0]
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag)

var isiOS = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)/i) != null //boolean check for iOS devices

var youtubelightbox = document.getElementById('youtubelightbox')
var player // variable to hold new YT.Player() instance

// Hide lightbox when clicked on
youtubelightbox.addEventListener('click', function(){
  this.style.display = 'none'
  player.stopVideo()
}, false)


// Exclude youtube iframe from above action
youtubelightbox.querySelector('.centeredchild').addEventListener('click', function(e){
e.stopPropagation()
}, false)


// define onYouTubeIframeAPIReady() function and initialize lightbox when API is ready
function onYouTubeIframeAPIReady() {
    createlightbox()
}

// Extracts the Youtube video ID from a well formed Youtube URL
function getyoutubeid(link){
// Assumed Youtube URL formats
// https://www.youtube.com/watch?v=Pe0jFDPHkzo
// https://youtu.be/Pe0jFDPHkzo
// https://www.youtube.com/v/Pe0jFDPHkzo
// and more

//See http://stackoverflow.com/a/6904504/4360074
var youtubeidreg = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/ ]{11})/i;
return youtubeidreg.exec(link)[1] // return Youtube video ID portion of link
}

// Creates a new YT.Player() instance
function createyoutubeplayer(videourl){
    player = new YT.Player('playerdiv', {
        videoId: videourl,
        playerVars: {autoplay:1,
                     rel:0,
                     showinfo:0,
                     fs:0
                     }
    })
}

// Main Youtube lightbox function
function createlightbox(){
    var targetlinks = document.querySelectorAll('.lightbox')
    for (var i=0; i<targetlinks.length; i++){
        var link = targetlinks[i]
        link._videoid = getyoutubeid(link) // store youtube video ID portion of link inside _videoid property
        targetlinks[i].addEventListener('click', function(e){
            youtubelightbox.style.display = 'block'
            if (typeof player == 'undefined'){ // if video player hasn't been created yet
                createyoutubeplayer(this._videoid)
            }
            else{
                if (isiOS){ // iOS devices can only use the "cue" related methods
                    player.cueVideoById(this._videoid)
                }
                else{
                    player.loadVideoById(this._videoid)
                }
            }
            e.preventDefault()
        }, false)
    }
}


if (isiOS){ // iOS devices can only use the "cue" related methods
    player.cueVideoById(this._videoid)
}
else{
    player.loadVideoById(this._videoid)
}

Answer 1

经过反复试验，我发现了这一点。

我将html更改为

<div id="youtubelightbox" class="parent">
  <div class="centeredchild"><div id="x">x</div>
    <div class="videowrapper">
      <div id="playerdiv"></div>
    </div>
  </div>
</div>

并将以下内容添加到脚本中

x.addEventListener('click', function(){
  youtubelightbox.style.display = 'none'
  player.stopVideo()
}, false)

添加一个不重新定位页面的关闭函数

1 个答案: