概要

Materializeのvideo-containerクラスを使うとyoutubeとかの動画埋め込みを簡単にレスポンシブにできて便利
- https://materializecss.com/media-css.html
でも使いかたをミスると動画が出てこなくなるので注意

コード

だめな例、正しい例、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

みんな聞きましょう。