Fancybox3 Youtube 视频答案

【问题标题】：Fancybox3 Youtube videosFancybox3 Youtube 视频
【发布时间】：2017-04-24 12:52:32
【问题描述】：

我花了很长时间熟悉 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>

【问题讨论】：

标签： jquery html css youtube fancybox

【解决方案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

【讨论】：

太好了，你现在如何控制宽度和高度，我想要以前默认的暗盒阴影。
Janis - 我尝试通过将这些代码插入到
Janis - 我正在尝试使用 fancybox3（当前使用 fancybox2）[link] whiteshepherdsnz.com/whiteShepherdAssistanceDog.html 复制此页面
这是使用 JS 更改背景颜色的方法：codepen.io/anon/pen/jmyEyg?editors=1010
我不想痛苦，但我需要知道如何使用 jquery 脚本重现我现在拥有的东西。圆圈中带有十字的按钮是否仍然可用，我如何将其恢复到原来的位置。我可以得到带有盒子阴影的无框外观吗？我需要回到学校去了解文档，而 V3 如此新的实际示例很少。