Das einbetten von youtube-Videos in magnific popup?

habe ich magnific-popup-plugin.aber es zeigt nicht das video-on-popup
Das einbetten von youtube-Videos in magnific popup?

InformationsquelleAutor Liju | 2014-01-14

  1. 39

    Überprüfen Sie den folgenden link zur Dokumentation:

    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>

    Hoffe, das hilft.

    ich habe gelesen, dass doc und Beurteilung der KMU-code, der aber noch nicht woking
    Beachten Sie die Standard-youtube-Funktion funktioniert nur, wenn er deine Seite serviert wird per http/s
    Gibt es hier nichts, auch verhindern, dass videos aus, der am Ende des Videos?
    Hinzufügen ?rel=0 am Ende der url
    //www.youtube.com/watch?v=VIDEOID?rel=0&ytp-pause-overlay=0 auch ausblenden das neue video Vorschlag overlay von Youtube, wenn man die pause-Taste.

    InformationsquelleAutor Pranita

  2. 7

    Standardmäßig Magnific Popup unterstützt nur eine Art von URL für jeden service, damit habe ich, soweit es für die Unterstützung nahezu jeden video-URL geben von 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'
            }
        }
    }
});

    Kopieren Sie einfach diese beiden Eigenschaft (iframe, type) und fügen Sie Sie zu Ihrem Magnific Popup -.

    InformationsquelleAutor Roy Shoa

  3. 3

    Ausgezeichneter Ausgangspunkt, Roy aber können verlängern das ein bisschen weiter, da hat Youtube starten von bestimmten Zeit verankert und heute gibt Benutzern die youtu.be links einbetten. So entsprechen beide Fälle einschließlich der Start-video von spezifischen timeline Tue ich dies. Beachten Sie, dass ich zusätzlich das markup überschreiben, entfernen Sie es, wenn Sie Sie nicht benötigen. 

    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()
});

    InformationsquelleAutor Benn

Schreibe einen Kommentar