Wie man Youtube Video in magnific Popup einbindet?

Question

ich habe magnific Popup plugin.but es das Video nicht auf Pop-up zeigt Wie Youtube Video in magnific Popup einzubetten?

Answer 1

Überprüfen Sie den folgenden Link für die 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> 

Hoffnung, das hilft.

Answer 2

standardmäßig Magnific Popup unterstützt nur eine Art von URL für jeden Dienst so dass ich soweit es fast jeden Video-URL-Typ von YouTube/Vimeo für die Unterstützung:

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

Gerade diese beide Eigenschaft kopieren (iframe, type) und fügen sie sie in Ihre Magnific Popup.

Answer 3

Ausgezeichneter Ausgangspunkt Roy, aber lassen Sie dies ein bisschen weiter ausbauen, da Youtube von bestimmten Zeit eingebettet hat und Benutzern heute die youtu.be Links zum Einbetten gibt. Also, um beide Fälle einschließlich Start Video von bestimmten Timeline übereinstimmen, mache ich dies. Beachten Sie, dass ich auch die Auszeichnungsüberschreibung hinzugefügt, es entfernen, wenn Sie es 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() 
});