如何使用带视频的bootstrap缩略图？

Question

我使用bootstrap缩略图。但我想添加视频元素而不是图像。但我不能

我的代码是：

<ul class="thumbnails">
          <li class="span4">
            <div class="thumbnail">
              <video data-src="holder.js/300x200" src="http://www.youtube.com/watch?v=jOaOjN-rsIM">
              <div class="caption">
                <h3>Thumbnail label</h3>
                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <hr>
                <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
              </div>
            </div>
          </li></ul>

Answer 1

尝试将iframe与youtube嵌入代码一起用作源代码。我假设你也希望这也是响应，所以我也添加了“flex-video”类的div。以下是Bootply Project的链接，可在您需要时为您提供帮助。

HTML：

        <ul class="thumbnails">
          <li class="span4">
            <div class="thumbnail">


                <div class="flex-video widescreen ">
                  <iframe class="" src="//www.youtube.com/embed/8wqtwkmsBvc" frameborder="0"></iframe>
                </div>   


              <div class="caption">
                <h3>Thumbnail label</h3>
                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
              </div>
            </div>
          </li>

        </ul>

的

CSS（用于响应视频）：

         .flex-video {
          position: relative;
          padding-top: 25px;
          padding-bottom: 67.5%;
          height: 0;
          margin-bottom: 16px;
          overflow: hidden;
           }

          .flex-video.widescreen { padding-bottom: 57.25%; }
          .flex-video.vimeo { padding-top: 0; }

          .flex-video iframe,
          .flex-video object,
          .flex-video embed {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
          }

 @media only screen and (max-device-width: 800px),  
 only screen and (device-width:1024px) and (device-height: 600px), only screen 

 and (width: 1280px) and (orientation: landscape), only screen 

 and (device-width: 800px), only screen and (max-width: 767px) {

 .flex-video { padding-top: 0; }
   }