Help us understand the problem. What is going on with this article?

Materializeでcol系のクラスとvideo-containerを同じタグ内で使ってはいけない

More than 1 year has passed since last update.

概要

  • 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_sample.png

備考

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にしておく。
  • 内側のiframeでは要素がピッタリ左上から始まるように位置調整する + 与えられた箱の大きさすべてを使うように指定

ということらしい。

サンプルで使ってる動画 is 何 という方へ

花譜 #17 「雛鳥」 【オリジナルMV】
https://www.youtube.com/watch?v=M1RIUrgJqWw

みんな聞きましょう。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした