i have magnific popup plugin.but it not showing the video on popup How to embed youtube video in magnific popup?
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试):
问题:
回答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.
回答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.
回答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()
});