HTML5×ModalによるPopUp動画の表示

写真や動画の一覧・再生にPopUpウィンドウで演出

See the Pen YouTube Video Modal by darkorcale (@darkorcale) on CodePen.

W3.CSSでResponsive対応

ブラウザでは一行(row)にサムネール3つを表示。
モバイルで表示する際、すべて1列に表示される。

  <div class="w3-row">
    <div class="w3-third">

参考：https://www.w3schools.com/w3css/w3css_responsive.asp

YouTubeサムネイル表示

imgタグを使い、attributeのhrefに表示するyoutubeの動画の実際URLを記載、
data-youtube-idに動画の識別子(id)を記入。

styleのwidthは表示スペース全体()の1/3に対しての92%で、
height高さはautoにしておけば、ブラウザが自動的にいい感じに揃えてくれる。

<img
  href="https://www.youtube.com/watch?v=K3EgAgqIZJE"
  data-youtube-id="K3EgAgqIZJE"
  class="video-thumb js-trigger-modal w3-card"
  src="http://img.youtube.com/vi/K3EgAgqIZJE/0.jpg"
  style="width:92%;height:auto;"
>

モーダルウィンドについて

W3.CSS Modal

https://www.appleple.com/blog/javascript/modal-video-js.html

Bootstrap3のモーダル・ダイヤログ関連リファレンス

http://bootstrap3.cyberlab.info/javascript/modals-events.html

California Sandstar