Twitter Bootstrap灯箱展示YouTube视频

我正在我的网站上工作，对HTML仍然很陌生。我试图使用Twitter Bootstrap和Twitter Bootstrap Lightbox代码在Lightbox中显示YouTube视频：http://jbutz.github.io/bootstrap-lightbox/Twitter Bootstrap灯箱展示YouTube视频

我已经能够获取图像以加载灯箱。但是，我不确定我需要做些什么才能让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>

任何帮助是极大的赞赏。我仍然很新，而且我很难过。

感谢

来源

2013-11-24 user3029311

这是灯箱只是图像。另外，你可以看看他们的github，看到只有一种内容类型，即图像。有许多处理各种媒体的灯箱。一个是：http://dimsemenov.com/plugins/magnific-popup/，真是太棒了！ – Christina

<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，灯箱CSS和JS文件。和jquery code for data-toggle =“lightbox”。

你可以在这里看到：http://ashleydw.github.io/lightbox/#single-image 在YouTube视频的HREF给予URL和设置数据切换，数据图片地产

来源

2014-03-09 18:39:31 Savoo

很高兴找到这个答案。这正是我所期待的。谢谢！ – cwiggo

Twitter Bootstrap灯箱展示YouTube视频

回答

相关问题