如何在华丽的弹出窗口中嵌入 youtube 视频？

Posted 2023-03-05

【中文标题】如何在华丽的弹出窗口中嵌入 youtube 视频？

【英文标题】：How to embed youtube video in magnific popup?

【发布时间】：2014-02-02 10:08:55

【问题描述】：

我有很棒的弹出插件。但它没有在弹出窗口中显示视频 如何在放大的弹出窗口中嵌入 youtube 视频？

【参考方案1】：

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

Doc

$(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>

希望这会有所帮助。

【讨论】：

注意the default youtube function only works when your page is served via http/s

这里还有什么可以防止相关视频出现在视频末尾的吗？

在url末尾添加?rel=0

//www.youtube.com/watch?v=VIDEOID?rel=0&ytp-pause-overlay=0 还可以在点击暂停按钮时隐藏 Youtube 的新视频建议叠加层。

【参考方案2】：

默认情况下，Magnific Popup 仅支持每种服务的一种 URL，因此我将其扩展为支持 YouTube/Vimeo 的几乎所有视频 URL 类型：

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。

【参考方案3】：

优秀的起点 Roy 但让我们进一步扩展这一点，因为 Youtube 已经从特定时间嵌入开始，现在为用户提供 youtu.be 嵌入链接。因此，为了匹配这两种情况，包括从特定时间线开始视频，我这样做了。 请注意，我还添加了标记覆盖，如果您不需要它，请将其删除。

function extendMagnificIframe()

    var $start = 0;
    var $iframe = 
        markup: '<div class="mfp-iframe-scaler">' +
                '<div class="mfp-close"></div>' +
                '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>' +
                '</div>' +
                '<div class="mfp-bottom-bar">' +
                '<div class="mfp-title"></div>' +
                '</div>',
        patterns: 
            youtube: 
                index: 'youtu', 
                id: function(url)    

                    var m = url.match( /^.*(?:youtu.be\/|v\/|e\/|u\/\w+\/|embed\/|v=)([^#\&\?]*).*/ );
                    if ( !m || !m[1] ) return null;

                        if(url.indexOf('t=') != - 1)

                            var $split = url.split('t=');
                            var hms = $split[1].replace('h',':').replace('m',':').replace('s','');
                            var a = hms.split(':');

                            if (a.length == 1)

                                $start = a[0]; 

                             else if (a.length == 2)

                                $start = (+a[0]) * 60 + (+a[1]); 

                             else if (a.length == 3)

                                $start = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]); 

                            
                                                           

                        var suffix = '?autoplay=1';

                        if( $start > 0 )

                            suffix = '?start=' + $start + '&autoplay=1';
                        

                    return m[1] + suffix;
                ,
                src: '//www.youtube.com/embed/%id%'
            ,
            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'
            
        
    ;

    return $iframe;     



$('.my-selector').magnificPopup(
    type: 'iframe',
    iframe: extendMagnificIframe()
);

【讨论】：

如果我想维护给定的嵌入链接，并将其用作触发器，同时仍将播放列表参数保留在其中，该怎么办？例如，https://www.youtube.com/watch?v=eU9FruuFxk4&list=PLpIvLuF2Dh9Z7Rrmoik2vuhaEaFCACfv4 的 URL 将嵌入为 https://www.youtube.com/embed/eU9FruuFxk4?list=PLpIvLuF2Dh9Z7Rrmoik2vuhaEaFCACfv4