Question

我查看了为此主题建议的现有帖子，但似乎没有一个具体针对我正在寻找的内容。

我有一个包含大量嵌入式YouTube视频的页面，加载快速连接页面需要一分多钟 - 在连接速度很慢的情况下，它几乎会永远存在。

我一直在研究灯箱方法，但大多数都需要将对象（图像，视频）编码到页面中，然后更改CSS以使其在单击链接时可见。我想要做的是对链接（文本或图像）和用于创建灯箱效果的周围div进行硬编码，然后在单击链接时创建嵌入视频的代码。

这样的事情：

<div class="wrapper">
    <a href="videos.php" onclick="myFunction(*youtube id*); return false;">Video #1</a>
    <div class='lightboxOverlay hidden'>   //div is hidden
        <div class='lightboxContent'>
            // Javascript writes code for embedded video here,
            // then makes the parent div visible
        </div>
    </div>
</div>

我会使用“getElementByID（ div id ）。innerHTML =” CodeForVideo “，但是有多个视频，所以我无法定位一个被点击了。

是否有任何方法可以针对选择的视频定位div并仅在该div中编写代码，还是有更好的方法来实现此目的？

感谢您的快速回复，@ Davidlrnt！但是，该网站必须保持向后兼容，Youtube API仅适用于与HTML5兼容的浏览器。

我试过了：

<div class="thumbnail">
    <a href="videos.php" onclick="vLightbox(Rt87CBUBlCo); return false;"><img src="images/thumbnails/20160828.jpg" /></a>
    <div class='lbOverlay hidden'>
        <div id="Rt87CBUBlCo" class='lbContent'>
        </div>
    </div>
</div>

function vLightbox(YoutubeID){
    document.getElementById(YoutubeID).innerHTML = '<iframe width="420" height="315" src="https://www.youtube.com/embed/' + youTubeID + '-ZnkxjjymsU?rel=0" frameborder="0" allowfullscreen style="float:right; margin-left:20px;"></iframe>';
}

它不起作用。我一定错过了什么......

Answer 1

您需要使用youtube iframe api，并且可以根据其ID动态嵌入任何视频。

https://developers.google.com/youtube/iframe_api_reference

function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '390', width: '640', videoId: 'M7lc1UVf-VE', events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); }

Answer 2

好的，一点一点地挖掘，我已经想出了一个适合我的答案。为了启发他人，我将在此发布：

HTML标记：

<div class="thumbnail">
    <a href="videos.php" onclick="vLightbox('-ZnkxjjymsU'); return false;"><img src="images/thumbnails/20160828.jpg" /></a>
    <div class='lbOverlay hidden'>
        <div id="-ZnkxjjymsU" class="lbContent">
        </div>
    </div>
</div>

（ - ZnkxjjymsU是视频的Youtube ID）

使用Javascript：

function vLightbox(YoutubeID){
    document.getElementById(YoutubeID).innerHTML = '<iframe width="420" height="315" src="https://www.youtube.com/embed/' + YoutubeID + '?rel=0&autoplay=1" frameborder="0" allowfullscreen style="float:right; margin-left:20px;"></iframe>';
}

CSS：

.lbOverlay{
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 100;
    background-image: url("images/overlay.png");
}

.lbContent{
    position: relative;
    top: 15%;
    left: 25%;
    width: 50%;
    text-align: center;
}

.hidden{
    display: none;
}

仍然需要切换＆＃34;隐藏＆＃34; ＆＃34; lbOverlay＆＃34; div和我有一些美容工作要做，但这应该很容易......

动态地将嵌入的YouTube视频添加到页面

2 个答案: