How to embed youtube video in magnific popup?

4 comments

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.

   Log in to Reply

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.

   Log in to Reply

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

   Log in to Reply

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.

   Log in to Reply