jQuery 如何在 magnific popup 中嵌入 youtube 视频？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21112025/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to embed youtube video in magnific popup?
提问by Liju
i have magnific popup plugin.but it not showing the video on popup How to embed youtube video in magnific popup?
我有 magnific popup plugin.but 它没有在 popup 上显示视频 如何在 magnific popup 中嵌入 youtube 视频？
回答by Pranita
Check the following link for documentation:
检查以下链接以获取文档：
$(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.
希望这可以帮助。
回答by Roy Shoa
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:
默认情况下，Magnific Popup 对每个服务仅支持一种类型的 URL，因此我将其扩展为支持几乎所有 YouTube/Vimeo 视频 URL 类型：
http://dimsemenov.com/plugins/magnific-popup/documentation.html#iframe-type
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.
只需复制这两个属性 ( iframe, type) 并将它们添加到您的 Magnific Popup 中。
回答by Benn
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.belinks 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.
Roy 是一个很好的起点，但让我们进一步扩展一下，因为 Youtube 从特定时间嵌入开始，现在为用户youtu.be提供嵌入链接。所以为了匹配这两种情况，包括从特定时间线开始视频，我这样做。请注意，我还添加了标记覆盖，如果您不需要，请将其删除。
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()
});
