缩略图以在bootstrap3

Question

我希望在bootstrap 3中有缩略图内容。我的视频源来自我的本地电脑和youtube

我的代码就像这样

<div class="thumbnail">
            <div class="thumbnail-img">
              <img src="img/2.jpg">
              <a href="video/inspiration-1.MKV" class="btn btn-primary play fancybox-media" role="button">
              <li class="fa fa-play"></li>
              </a>
            </div>
            <div class="caption">
              <h5 class="h5-big">HOW TO </h5>
                <a class="uppercase bold" href="detil.html">how to</a>
            </div>
          </div>
        </div>

        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
          <div class="thumbnail">
            <div class="thumbnail-img">
              <img src="img/2.jpg">
              <a href="http://www.youtube.com/watch?v=opj24KnzrWo" class="btn btn-primary play fancybox-media" role="button">
              <li class="fa fa-play"></li>
              </a>
            </div>
            <div class="caption">
              <h5 class="h5-big">HOW TO </h5>
                <a href="detil.html" class="uppercase bold">recipe</a>
            </div>
          </div>
        </div>

我之前尝试使用fancybox。但它无法在本地电脑上播放。所以我无法检查它是否有效。有些人知道如何弹出像花哨的盒子，但可以从响应的本地计算机播放本地视频。如果它有效，我无法测试它？