twitter-bootstrap Twitter Bootstrap 灯箱显示 YouTube 视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20181615/
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
Twitter Bootstrap Lightbox display YouTube Video
提问by user3029311
I'm working on my site and am still very new to HTML. I'm trying to show YouTube videos in a lightbox using Twitter Bootstrap and the Twitter Bootstrap Lightbox code I found here: http://jbutz.github.io/bootstrap-lightbox/
我正在我的网站上工作，对 HTML 仍然很陌生。我正在尝试使用 Twitter Bootstrap 和我在此处找到的 Twitter Bootstrap Lightbox 代码在灯箱中显示 YouTube 视频：http: //jbutz.github.io/bootstrap-lightbox/
I've been able to get images to load in the lightbox. But, I'm not sure what I need to do to get the YouTube video to play instead. When I look at the YouTube documentation it provides both iframe and embed options. But, when I replace the code with one of these and change the link to my videos the lightbox doesn't load and of course the video can't be seen.
我已经能够在灯箱中加载图像。但是，我不确定我需要做什么才能播放 YouTube 视频。当我查看 YouTube 文档时，它提供了 iframe 和嵌入选项。但是，当我用其中之一替换代码并更改指向我的视频的链接时，灯箱不会加载，当然也看不到视频。
Here is my code using the embed option:
这是我使用 embed 选项的代码：
<div class="container">
<div class="row">
<div class="span12">
<h4>Band Concert</h4>
<div id="bandlightbox1" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="lightbox-content">
<embed
width="420" height="345"
src="https://www.youtube.com/watch?v=og8cxXICoVU"
type="application/x-shockwave-flash">
</embed>
<div class="lightbox-caption">
<p>This is a video of my friends and I at our band concert. The guy in that glasses is our teacher person. The song is Friday I'm in Love for anyone who doesn't know. I'm on the piano that sounds like a harpsichord.</p>
</div>
</div>
</div>
</div>
</div>
</div>
Any assistance is greatly appreciated. I'm still really new and I'm stumped.
非常感谢任何帮助。我还是个新手，我很难过。
Thanks
谢谢
回答by Savoo
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<link href="../dist/ekko-lightbox.css" rel="stylesheet">
<div class="row">
<div class="col-md-offset-1 col-md-10">
<div class="row">
<a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox" data-gallery="youtubevideos" class="col-sm-4">
<img src="//i1.ytimg.com/vi/yP11r5n5RNg/mqdefault.jpg" class="img-responsive">
</a>
<a href="http://youtu.be/iQ4D273C7Ac" data-toggle="lightbox" data-gallery="youtubevideos" class="col-sm-4">
<img src="//i1.ytimg.com/vi/iQ4D273C7Ac/mqdefault.jpg" class="img-responsive">
</a>
<a href="//www.youtube.com/embed/b0jqPvpn3sY" data-toggle="lightbox" data-gallery="youtubevideos" class="col-sm-4">
<img src="//i1.ytimg.com/vi/b0jqPvpn3sY/mqdefault.jpg" class="img-responsive">
</a>
</div>
</div>
</div>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="../dist/ekko-lightbox.js"></script>
<script type="text/javascript">
$(document).ready(function ($) {
// delegate calls to data-toggle="lightbox"
$(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
event.preventDefault();
return $(this).ekkoLightbox({
onShown: function() {
if (window.console) {
return console.log('Checking our the events huh?');
}
}
});
});
});
first you have to add ekko-lightbox CSS and js file. and jquery code for data-toggle="lightbox" .
首先你必须添加 ekko-lightbox CSS 和 js 文件。和 data-toggle="lightbox" 的 jquery 代码。
You can see here: http://ashleydw.github.io/lightbox/#single-imagein href give url of youtube video and set data-toggle,data-gallery property
你可以在这里看到：http: //ashleydw.github.io/lightbox/#single-imagein href 给出 youtube 视频的 url 并设置 data-toggle,data-gallery 属性
