Bootstrap 動画:疑似ライトボックス

提供:wiki - PCスキルの小技・忘却防止メモ
移動: 案内, 検索

目次

ソース:html

「class=modal-full」は、後述のcssの設定をしないなら不要

<div id="☆☆☆">
  
  <a class="modalLnk" href="○○○.mp4"><img src="○○○.jpg" width="200"></a>
  <a class="modalLnk" href="△△△.mp4"><img src="△△△.jpg" width="200"></a>
  
  <!-- モーダルウィンドウ -->
  <div class="modal fade modal-full" id="xxx" tabindex="-1" role="dialog"><div class="modal-dialog" role="document">
    <div class="modal-content">
      
      <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <div id="wrapVideo"></div>
      </div>
    </div>
  </div></div>
</div>

ソース:js

「class=modalLnk」をクリックしたら、リンク先をvideoタグで出力させる。

<script>
  $('#☆☆☆').on('click', '.modalLnk', function(){
    var md = $('#xxx');
    var video = '<video controls preload style="width:100%">'
              + '  <source src="' + $(this).attr('href') + '" type="video/mp4">'
              + '</video>';
    
    md.find('#wrapVideo').html(video);
    md.modal('show');
    return false;
  });
</script>

ソース:css

CSSの設定は不要だけど、下記のようなコトをしたいなら必要(「class=modal-full」が必要)

  1. ウィンドウ幅に合わせてサイズを拡縮してほしい
  2. モーダルウィンドウ内のヘッダとフッタを削除
.modal-full .modal-dialog {
  width: auto;
  margin: 30px 10px;
}
@media (min-width: 768px) {
  .modal-full .modal-dialog {
    margin: 30px 30px;
  }
}
.modal-full .modal-dialog .modal-body {
  position: relative;
  top: 0;
  left: 0;
}
.modal-full .modal-dialog .modal-body .close {
  float: none;
  position: absolute;
  top: -30px;
  right: -4px;
  font-weight: normal;
  text-shadow: none;
  font-size: 36px;
  color: #fff;
  opacity: 0.5;
}
.modal-full .modal-dialog .modal-body .close:hover {
  opacity: 1;
}

関連項目