Fancybox3 Youtube videos

问题

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.

Currently using this script:

// 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)' 
            }
        }
    }
});

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>

回答1:

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>

and change background color using CSS:

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

See demo - http://codepen.io/fancyapps/pen/YVGrgG?editors=1100

Edit: 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

来源：https://stackoverflow.com/questions/43588590/fancybox3-youtube-videos

标签

jquery

html

css

youtube

fancybox