所以这是我的html
<a href="#aboutbarrybio" id="about_barry" class="aboutusbox">Link to Bio</a>
<div id="aboutbarrybio" class="bio_wrapper" style="display: none;">
<div class="about_video">
<div class="video_wrapper">
<div class="placard" style="display: none;"><img width="720" height="405" style="cursor:pointer;" src="http://we4.me/tiv/wp-content/uploads/2013/02/youtube-placard-e1359864185923.png"></div>
<div style="display: block;" class="thevideo">
<embed width="720" height="405" wmode="transparent" type="application/x-shockwave-flash" src="http://www.youtube.com/v/9bZkp7q19f0&autoplay=1&rel=0">
</div>
</div>
</div>
这是我为 fancybox 编写的 javascript:
$(".aboutusbox").fancybox({
padding : 1,
width : 960,
afterShow : function() {
$('.fancybox-opened .placard').each(function(){
$('.fancybox-opened .placard').show();
$('.fancybox-opened .thevideo').hide();
});
$('.fancybox-opened .placard').click(function(){
$('.fancybox-opened .placard').hide();
$('.fancybox-opened .thevideo').show();
});
},
afterClose : function() {
$('.fancybox-inner').empty();
}
});
尝试用图像标语牌替换视频,然后使用内联隐藏框在fancybox中显示。问题是,如果用户在 Firefox(和 IE?)上播放视频时关闭,它仍然在后台播放。 Chrome 按预期工作。有什么方法可以减轻减去 iframe/ajax、youtube api 或仅使用视频本身?
最佳答案
无需内嵌视频(以及相关问题),您可以执行以下操作:
href
),click
到标语牌图像,然后将其替换为 youtube 内容(在 afterShow
回调中)。 此外,您可以使用 (HTML5)
data-*
从链接中传递图像/视频尺寸。属性所以而不是这个:<a href="#aboutbarrybio" id="about_barry" class="aboutusbox">Link to Bio</a>
...你可以这样做:
<a id="about_barry" class="aboutusbox" href="http://www.youtube.com/v/9bZkp7q19f0&autoplay=1&rel=0" data-width="720" data-height="405">Link to Bio</a>
然后使用此脚本显示标语牌图像并将其替换为
click
通过 youtube 视频:$(document).ready(function () {
$(".aboutusbox").fancybox({
padding: 0,
fitToView: false, // fancybox won't auto-resize to fit in viewport
// set placard image as content
content: '<img class="placard" src="http://we4.me/tiv/wp-content/uploads/2013/02/youtube-placard-e1359864185923.png" width="720" height="405" alt="placard" />',
scrolling: 'no',
afterShow: function () {
// get dimensions from data attributes
var $width = $(this.element).data('width');
var $height = $(this.element).data('height');
// create youtube content
var newContent = "<iframe src='" + this.href + "' frameborder='0' allowfullscreen width='" + $width + "' height='" + $height + "'></iframe>";
// replace content on placard click
$(".fancybox-inner").on("click", ".placard", function () {
$(".fancybox-inner").html(newContent);
});
}
});
}); // ready
见 JSFIDDLE 演示。
通知 那
.on()
需要 jQuery 1.7+
关于jquery fancybox 在 FF 和 IE 中关闭后仍然内联播放视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14780895/