Question

我花了很长时间熟悉fancybox2来显示Youtube视频和幻灯片现在V3已经到达并且不是代码精通我想知道我使用的代码是否需要更改，因为看起来似乎只需3个文件：js，css＆amp; 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

Fancybox3 Youtube视频

1 个答案: