Question

所以这是我的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&amp;autoplay=1&amp;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或只是使用视频本身？

Answer 1

无需内联视频（以及相关问题）即可：

直接链接到视频（获取href），
打开fancybox并将标语牌图片设置为内容，
将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&amp;autoplay=1&amp;rel=0" data-width="720" data-height="405">Link to Bio</a>

然后使用此脚本显示标语牌图片，并通过youtube视频将其替换为click：

$(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 +

在FF和IE关闭后，jquery fancybox仍在播放视频内联

1 个答案: