Question

我正在使用我的网站，我仍然是HTML的新手。我正在尝试使用Twitter Bootstrap和我在此处找到的Twitter Bootstrap Lightbox代码在灯箱中显示YouTube视频：http://jbutz.github.io/bootstrap-lightbox/

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

以下是使用嵌入选项的代码：

<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属性

Twitter Bootstrap Lightbox显示YouTube视频

1 个答案: