0

所以这是我的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 或仅使用视频本身？

4

1 回答 1

1

无需内嵌视频（以及相关问题），您可以执行以下操作：

  • 直接链接到视频（获取href），
  • 打开fancybox并将标语牌图像设置为内容，
  • 将 a 绑定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>

然后使用此脚本显示标语牌图像并将其替换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+的通知

于 2013-02-09T00:01:01.403 回答