Question

我有一个很棒的弹出插件。但它没有在弹出窗口上显示视频如何在YouTube弹出窗口中嵌入YouTube视频？

Answer 1

请查看以下链接以获取文档：

$(document).ready(function() {
    $('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
        disableOn: 700,
        type: 'iframe',
        mainClass: 'mfp-fade',
        removalDelay: 160,
        preloader: false,

        fixedContentPos: false
    });
});

<a class="popup-youtube" href="http://www.youtube.com/watch?v=0O2aH4XLbto">Open YouTube video</a>

希望这有帮助。

Answer 2

默认情况下，Magnific Popup仅为每项服务支持一种类型的网址，因此我会对其进行扩展以支持几乎所有视频网址类型的YouTube / Vimeo：

http://dimsemenov.com/plugins/magnific-popup/documentation.html#iframe-type

$('.my-selector').magnificPopup({
    type: 'iframe',
    iframe: {
        patterns: {
            youtube: {
                index: 'youtube.com/', 
                id: function(url) {        
                    var m = url.match(/[\\?\\&]v=([^\\?\\&]+)/);
                    if ( !m || !m[1] ) return null;
                    return m[1];
                },
                src: '//www.youtube.com/embed/%id%?autoplay=1'
            },
            vimeo: {
                index: 'vimeo.com/', 
                id: function(url) {        
                    var m = url.match(/(https?:\/\/)?(www.)?(player.)?vimeo.com\/([a-z]*\/)*([0-9]{6,11})[?]?.*/);
                    if ( !m || !m[5] ) return null;
                    return m[5];
                },
                src: '//player.vimeo.com/video/%id%?autoplay=1'
            }
        }
    }
});

只需复制这两个属性（iframe，type）并将其添加到Magnific Popup。

Answer 3

优秀的起点Roy但是让我们进一步扩展这一点，因为Youtube从特定的时间嵌入开始，现在为用户提供了SELECT * FROM MyTable A INNER JOIN MyTable B ON DATEADD(M,-1,a.Calendar_Date) = b.Calendar_Date INNER JOIN MyTable C ON DATEADD(M,-2,a.Calendar_Date) = c.Calendar_Date ... INNER JOIN MyTable L ON DATEADD(M,-12,a.Calendar_Date) = l.Calendar_Date嵌入的链接。因此，为了匹配这两种情况，包括从特定时间线开始视频，我这样做。 请注意，我还添加了标记覆盖，如果您不需要，请将其删除。

youtu.be

如何在YouTube弹出窗口中嵌入YouTube视频？

3 个答案: