twitter-bootstrap - Twitter Bootstrap灯箱显示YouTube视频

Question

我正在我的网站上工作，但对HTML还是很陌生。我正在尝试使用Twitter Bootstrap和在这里找到的Twitter Bootstrap Lightbox代码在灯箱中显示YouTube视频:http://jbutz.github.io/bootstrap-lightbox/

我已经能够将图像加载到灯箱中。但是，我不确定要播放YouTube视频需要做什么。当我查看YouTube文档时，它同时提供了iframe和嵌入选项。但是，当我用其中之一替换代码并更改指向我的视频的链接时，灯箱无法加载，当然也看不到视频。

这是我使用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>

非常感谢您的协助。我仍然很新，很沮丧。

谢谢

Answer 1

    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="../dist/ekko-lightbox.css" rel="stylesheet">

范例4:YouTube影片库

                <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?');
                            }
                        }
                    });
                });
});

首先，您必须添加ekko-lightbox CSS和js文件。
和data-toggle =“lightbox”的jquery代码。




您可以在这里看到:http://ashleydw.github.io/lightbox/#single-image
在href中提供youtube视频的url并设置data-toggle，data-gallery属性