我正在尝试在用户单击链接时以模式显示并自动播放 YouTube 视频。
我在第一个视频中使用了此功能,但是后续视频会打开初始视频。
在调试过程中,我注意到 videoID 的警报频率与之前按钮的 ID 单击按钮的次数一样多。这似乎是相关的。
<script src="//www.youtube.com/player_api"></script>
<script>
function onYouTubePlayerAPIReady() {
$('.feature-modal-btn').on('click', function(e){
e.preventDefault();
var btn = $(this);
//var modal = "#YTMODAL";
var ytVideoID = btn.data('ytvideoid');
$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
alert(ytVideoID);
player = new YT.Player('feature-video', { //Add the player
width: '800',
videoId: ytVideoID,
playerVars: {
rel : 0,
theme : 'light',
showinfo : 0,
showsearch : 0,
autoplay : 1,
autohide : 1,
modestbranding : 1
},
events: {
}
});
});
$(document).on('close.fndtn.reveal', '[data-reveal]', function () {
$('#YTMODAL .flex-video #feature-video').remove();
$('#YTMODAL .flex-video #feature-video iframe').remove();
player = '';
$('#YTMODAL .flex-video').append('<div id="feature-video" />');
});
});
}
</script>
<a href="" class="feature-modal-btn" data-ytvideoid="o_nA1nIT2Ow" data-reveal-id="YTMODAL">
<a href="" class="feature-modal-btn" data-ytvideoid="p-iFl4qhBsE" data-reveal-id="YTMODAL">
<div id="YTMODAL" class="reveal-modal full" data-reveal >
<div class="video-container flex-video widescreen">
<div id="feature-video">[this div will be converted to an iframe]</div>
</div>
<a class="close-reveal-modal">×</a>
</div>
我正在使用基础模式显示。 http://foundation.zurb.com/docs/components/reveal.html
如何调整我的代码,以便每次单击链接时都显示正确的电影?
更新 我创建了一个 codepen 来展示正在发生的事情。尝试使用一个和两个链接打开和关闭模式 http://codepen.io/anon/pen/HkoKg
最佳答案
这只是我把代码弄乱了,而不是 YT 或这支笔中的 Reveal 工作版本特有的内容
http://codepen.io/anon/pen/HkoKg?editors=101
$(document).foundation();
var ytvideoid;
$('.feature-modal-btn').on('click', function(e){
ytvideoid = $(this).data('ytvideoid')
});
$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
var modal = $(this);
//console.log(modal);
player = new YT.Player('feature-video', { //Add the player
width: '800',
videoId: ytvideoid,
playerVars: {
rel : 0,
theme : 'light',
showinfo : 0,
showsearch : 0,
autoplay : 1,
autohide : 1,
modestbranding : 1
},
events: {
}
});
});
$(document).on('close.fndtn.reveal', '[data-reveal]', function () {
$('#YTMODAL .flex-video #feature-video').remove();
$('#YTMODAL .flex-video').append('<div id="feature-video" />');
});
关于javascript - YouTube API 与 Foundation Modal,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26051626/