jquery - Fancybox3 Youtube 视频

Question

我花了很长时间熟悉 fancybox2 来显示 Youtube 视频和幻灯片，现在 V3 已经到来并且不精通代码我想知道我使用的代码是否需要更改，因为似乎只需要 3 个文件:js、css 和 jquery。

目前正在使用这个脚本:

// fancybox for youtube
$(".youtube").fancybox({
    type: 'iframe',
    maxWidth: 853,
    maxHeight: 480,
    padding: 0,
    openEffect: 'elastic',
    openSpeed: 250,
    closeEffect: 'elastic',
    closeSpeed: 150,
    closeClick: true,
    closeBtn: true,
    iframe: {
        preload: false // fixes issue with iframe and IE
    },
    helpers: {
        overlay: {
            css: { 'background': 'rgba(80, 163, 130, 0.9)' 
            }
        }
    }
});

您会注意到我更改了叠加层的颜色和不透明度以适应我的网站设计，根据我所做的谷歌搜索，我知道这可能在版本 3 下再次更改，但我找不到任何文档它。 调用脚本的html是:

<a class="youtube" href="https://www.youtube.com/embed/U6vutH_9e_0?rel=0&fs=1&autoplay=0" frameborder="0" allowfullscreen></a>

Answer 1

v3 不支持您列出的任何选项。实际上，您可以在不编写任何 js 行的情况下使用 v3，只需创建如下链接:

<a data-fancybox href="https://www.youtube.com/embed/U6vutH_9e_0?rel=0&fs=1&autoplay=0">
    YouTube video
</a>

并使用 CSS 更改背景颜色:

.fancybox-bg {
   background: rgba(80, 163, 130, 0.9);
}

查看演示 - http://codepen.io/fancyapps/pen/YVGrgG?editors=1100

编辑:如果需要，您可以使用 JavaScript 自定义颜色:

$('[data-fancybox]').fancybox({
  onInit : function( instance ) {
    instance.$refs.bg.css('background', 'rgba(80, 163, 130, 0.9)');
  }
});

http://codepen.io/anon/pen/jmyEyg?editors=1010