我正在使用Bootstrap编程一个网站和家庭/森林一个页面模板(在themeforest.net上),我定制了这个模板的投资组合部分,当我们点击缩略图时(而不是最初的完整图像弹出窗口)有一个视频弹出窗口。
弹出窗口与'mfp-iframe'类和'video / video_name.mp4'href完美配合,所以代码如下:
我不想使用mp4视频而是使用vimeo视频,当我用vimeo链接'https://vimeo.com/118901221'或嵌入vimeo链接'https://player.vimeo.com/video/118901221'替换href'video / video_name.mp4'时它不起作用
请有人帮忙解决这个问题。
你只需要下面的代码,并尝试分析我上次qimexswpoi关于Vimeo的问题。如果你在Vimeo遇到我的问题。
MAGNIFIC-POPUP: Embed videos from Vimeo on my site using magnefic popup
您需要提供视频的直接链接。对于vimeo,只有在您支付了高级帐户后才能使用此功能。解决方案是将视频重新上传到YouTube,然后通过执行以下操作获取直接链接:
如果你想从YOUTUBE或vimeo实际嵌入,请检查一下:
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Fontawesome -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- Magnific Popup CSS-->
<link rel="stylesheet" type="text/css" href="css/magnific-popup.css">
</head>
<body>
<a class="vimeo-video-1" href="#">CLICK ME TO POP-UP 1 VIDEP</a><br>
<a class="vimeo-video-more" href="#">CLICK ME TO POP-UP MORE VIDEO</a>
<!--Jquery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap JS -->
<script src="js/bootstrap.min.js"></script>
<!-- Magnific Popup JS -->
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/magnific-popup-options.js"></script>
</body>
</html>
<script type="text/javascript">
$('.vimeo-video-1').magnificPopup({
items: [
{
src: 'https://player.vimeo.com/video/118901221',
type: 'iframe' // this overrides default type
}],
gallery: {
enabled: false
},
type: 'image'
});
//MORE VIMEO VIDEO
$('.vimeo-video-more').magnificPopup({
items: [
{
src: 'https://player.vimeo.com/video/118901221',
type: 'iframe' // this overrides default type
},
{
src: 'https://player.vimeo.com/video/211690338',
type: 'iframe' // this overrides default type
},],
gallery: {
enabled: true
},
type: 'image'
});
</script>
来自$(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>
。和documentation。