Fancybox3 Youtube视频 [英] Fancybox3 Youtube videos

问题描述

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

I spent a long time getting familiar with fancybox2 to display Youtube videos and slide shows now V3 has arrived and not being code savvy I'm wondering if the code I use needs to be changed given that there appears to be only 3 files required: 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是:

You will note I change the colour and the opacity of the overlay to fit in with my web site design and from what googling I've done I understand this may have changed again under version3 but I can't find any documentation on it. The html calling the script is:

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

推荐答案

v3中不支持您列出的所有选项.实际上，您无需编写任何js行就可以使用v3，只需创建这样的链接即可:

None of the options you have listed is supported in v3. Actually, you can use v3 without writing a single js line, just create links like this:

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

并使用CSS更改背景颜色:

and change background color using CSS:

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

请参阅演示- http://codepen.io/fancyapps/pen/YVGrgG?编辑者= 1100

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

If you want, you can customize color using 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视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！