概要
- Materializeのvideo-containerクラスを使うとyoutubeとかの動画埋め込みを簡単にレスポンシブにできて便利
- でも使いかたをミスると動画が出てこなくなるので注意
コード
だめな例、正しい例、video-container使わないで頑張る例、それぞれのコード
video-container.html
<html>
<head>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<div class="row">
<!-- colとvideo-containerを同じdivで使うと動画が出てこない -->
<div class="col s4 video-container">
<iframe src="https://www.youtube.com/embed/M1RIUrgJqWw" frameborder="0"></iframe>
</div>
<!-- colとvideo-containerを入れ子にするとちゃんと出てくる -->
<div class="col s4">
<div class="video-container">
<iframe src="https://www.youtube.com/embed/M1RIUrgJqWw" frameborder="0"></iframe>
</div>
</div>
<!-- 参考: 自力でレスポンシブ対応する場合 -->
<div class="col s4">
<div style="position: relative; width: 100%; height: 0; padding-top: 56.25%">
<iframe src="https://www.youtube.com/embed/M1RIUrgJqWw" frameborder="0"
style="position:absolute; top:0; left: 0; width: 100%; height: 100%"></iframe>
</div>
</div>
</div>
</body>
</html>
実行例
間違った使い方をすると左側のように何も出てこなくなる
備考
video-containerを使わない場合の説明
ググるといっぱい出てくるが、めんどいのでおとなしくフレームワークの機能に乗っかったほうがよさそう
上記のコードからMaterialize依存の部分を取り除くとこうなる
responsive-ganbaru.html
<div style="position: relative; width: 100%; height: 0; padding-top: 56.25%">
<iframe src="https://www.youtube.com/embed/M1RIUrgJqWw" frameborder="0"
style="position:absolute; top:0; left: 0; width: 100%; height: 100%"></iframe>
</div>
ぱっと見、何でこれで動くのかわかりにくいが
- 外側のdivで要素の幅に合わせた高さの「箱」 をpadding-topで作る。元の要素の高さは邪魔なので0にしておく。
- padding-topは%を指定すると要素のwidthに対する割合の値をpaddingしてくれる
- なので、16:9の場合は 9/16 = 56.25% にしておくとwidthの56:25%の高さの箱ができていい感じになる
- https://developer.mozilla.org/ja/docs/Web/CSS/padding-top
- 内側のiframeでは要素がピッタリ左上から始まるように位置調整する + 与えられた箱の大きさすべてを使うように指定
ということらしい。
サンプルで使ってる動画 is 何 という方へ
花譜 #17 「雛鳥」 【オリジナルMV】
https://www.youtube.com/watch?v=M1RIUrgJqWw
みんな聞きましょう。