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視頻

回答

相關問題