javascript Fancybox 2.0 和 Youtube 视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15968805/
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
Fancybox 2.0 and Youtube Video
提问by grabner
I want to open a youtube video in the new fancybox. I don't get it to work. It always goes directly to the page instead of opening it in the fancybox. Here is the code:
我想在新的fancybox 中打开一个youtube 视频。我不明白它的工作。它总是直接进入页面，而不是在fancybox 中打开它。这是代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>youtube video</title>
<link rel="stylesheet" href="css/jquery.fancybox.css" />
<script src="./js/jquery-1.9.1.min.js"></script>
<script src="./js/jquery.fancybox.pack.js"></script>
<script>
$(document).ready(function(){
$(".fancybox-media").fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
}
});
});
</script>
</head>
<body>
<a href="http://www.youtube.com/watch?v=b_ojoebJyvc" class="fancybox-media">Video</a>
</body>
</html>
What I'm doing wrong? I also tried this code (as stated on the fancybox website):
我做错了什么？我也试过这个代码（如fancybox网站上所述）：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>youtube test</title>
<link rel="stylesheet" href="css/jquery.fancybox.css" />
<link rel="stylesheet" href="css/jquery.fancybox-buttons.css" />
<link rel="stylesheet" href="css/jquery.fancybox-thumbs.css" />
</head>
<body>
<a class="various fancybox.iframe" href="http://www.youtube.com/v/ZeStnz5c2GI?fs=1&autoplay=1"><img src="http://dogmatic69.com/files/portfolio/image/4f288818-c5a8-4872-a003-06376318cd71/stackoverflow-logo.png" width="200" /></a>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/jquery.mousewheel-3.0.6.pack.js"></script>
<script src="js/jquery.fancybox-buttons.js"></script>
<script src="js/jquery.fancybox-media.js"></script>
<script src="js/jquery.fancybox-thumbs.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'elastic',
closeEffect : 'none'
});
});
</script>
</body>
</html>
This code should be the same as on this page. What is the difference?
此代码应与此页面上的相同。有什么区别？
EDIT:
编辑：
It is the youtube link!
这是youtube链接！
http://www.youtube.com/v/ZeStnz5c2GI?fs=1&autoplay=1
http://www.youtube.com/v/ZeStnz5c2GI?fs=1&autoplay=1
does work.
确实有效。
This link doesn't
这个链接没有
http://www.youtube.com/watch?v=b_ojoebJyvc
http://www.youtube.com/watch?v=b_ojoebJyvc
What can I do?
我能做什么？
$(document).ready(function() {
$(".various").click(function() {
$.fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'elastic',
closeEffect : 'none',
href : this.href.replace(new RegExp("watch\?v=", "i"), 'v/') + '?fs=1&autoplay=1'
});
//alert(this.href.replace(new RegExp("watch\?v=", "i"), 'v/'));
alert(this.href);
});
});
This doesn't work. The href is never overwritten!
这不起作用。href 永远不会被覆盖！
This also doesn't work (it always follows the link and no fancybox is openend):
这也不起作用（它始终遵循链接并且没有花哨的盒子是开放式的）：
$(document).ready(function() {
$(".various").click(function() {
$.fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'elastic',
closeEffect : 'none',
beforeLoad : function(){
var url= $(this.element).data("href");
url.replace(new RegExp("watch\?v=", "i"), 'v/') + '?fs=1&autoplay=1'
this.href = url
alert(url);
}
});
//alert(this.href.replace(new RegExp("watch\?v=", "i"), 'v/'));
//alert(this.href);
});
});
So I think you can forget fancybox 2.0. Take the old one and you are good ...
所以我想你可以忘记fancybox 2.0。拿旧的，你很好......
回答by grabner
Thanks to JFKagain. This works now:
再次感谢肯尼迪。这现在有效：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>youtube test</title>
<link rel="stylesheet" href="css/jquery.fancybox.css" />
</head>
<body>
<a class="various fancybox.iframe" href="http://www.youtube.com/watch?v=L9szn1QQfas"><img src="http://dogmatic69.com/files/portfolio/image/4f288818-c5a8-4872-a003-06376318cd71/stackoverflow-logo.png" width="200" /></a>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'elastic',
closeEffect : 'none',
beforeLoad : function(){
var url= $(this.element).attr("href");
url = url.replace(new RegExp("watch\?v=", "i"), 'v/');
url += '?fs=1&autoplay=1';
this.href = url
}
});
});
</script>
</body>
</html>
回答by acme
Remove the dot in your classattribute and it should work:
删除class属性中的点，它应该可以工作：
<a href="http://www.youtube.com/watch?v=qnydFmqHuVo" class="fancybox-media">Video</a>
(edited)
（已编辑）
