我正在创建一个灯箱来在没有插件的情况下播放来自 youtube 的视频，到目前为止一切进展顺利，但现在我遇到了问题，我不知道如何让 youtube 视频在 Lightbox 时停止播放已关闭，这是代码
//triggering or close the lightbox
$( '#overlay, #close').on('click', function(event) {
$("#lightbox, #overlay").hide();
});
$( '#show').on('click', function(event) {
$("#lightbox, #overlay").show();
});
// This loads the iframe only on click on the Lightbox Button
var iframes = $('iframe');
$('.show').click(function() {
iframes.attr('src', function() {
return $(this).data('src');
});
});
iframes.each(function() {
var src = $(this).attr('src');
$(this).data('src', src).attr('src', '');
});
此外，我不知道如何仅播放我单击的按钮中的视频，因为现在当我单击显示灯箱按钮时，它会播放页面中的所有视频，而不是只是我单击的按钮中的当前按钮。
这是Jsfiddle exemple 。 HTML 包含在其中
最佳答案
尝试查看 YouTube Player API Reference
下面我将 API 引用中的示例代码合并到 JSFiddle 示例的修改版本中:
<html>
<head>
<style>
/* CSS styles removed for brevity */
</style>
</head>
<body>
<div class="left">
<button class="show">Show lightbox</button>
<!-- LIGHTBOX CODE BEGIN -->
<div id="lightbox" class="lightbox" style="display:none">
<div class="white_content">
<a href="javascript:;" id="close">Close</a>
<p>Click anywhere to close the lightbox.</p>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
</div>
</div>
<div id="overlay" style="display:none">
<!-- LIGHTBOX CODE END -->
</div>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$( '#overlay, #close').on('click', function(event) {
$("#lightbox, #overlay").hide();
player.stopVideo();
});
$( '.show').on('click', function(event) {
$("#lightbox, #overlay").show();
player.seekTo(0, false);
player.playVideo();
});
// 2. This code loads the IFrame Player 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);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) { }
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
function onPlayerStateChange(event) { }
</script>
</body>
</html>
利用 API，上述代码在灯箱关闭时停止视频。
注意:我删除了第二个按钮以保持代码示例简单。
关于javascript - Lightbox 关闭时停止播放 Youtube 视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29442213/