How to embed youtube video in magnific popup?

Question

i have magnific popup plugin.but it not showing the video on popup How to embed youtube video in magnific popup?

Answer 1

Check the following link for documentation:

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>

Hope this helps.

Answer 2

By default Magnific Popup supports only one type of URL for each service so I extent it for support almost every video URL type of 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'
            }
        }
    }
});

Just copy those two property (iframe, type) and add them to your Magnific Popup.

Answer 3

Excellent starting point Roy but lets extend this a bit further since Youtube has start from specific time embeds and nowadays gives users the youtu.be links to embed. So to match both cases including starting video from specific timeline I do this. Note that I also added the markup override, remove it if you dont need it.

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

Answer 4

I needed the same but for selh-hosted video on the website. Here is the solution for this, using href as the video source.

JS

<script>
    $(document).ready(function() {
        $('.portfolio-popup-video').magnificPopup({
            disableOn: 700,
            mainClass: 'mfp-fade',
            removalDelay: 160,
            preloader: false,
            fixedContentPos: false,
            type: 'iframe',
            src: $('<video controls>\
                      <source src="'+$(this).attr('href')+'" type="video/webm">\
                      Désolé, votre navigateur ne supporte pas les vidéos.\
                    </video>')
        });
    });
</script>

HTML

<a class="portfolio-popup-video" href="/path/video-file.webm">

Here is the code, hope it helps some of you.