このサイトはCSSフレームワークのひとつである「Materialize」を使用しています。
Bootstrapとは違ったマテリアルデザインが気に入ったので採用してみました。オフィシャルサイトに全て記載はあるものですが、メモと備忘録代わりにMaterializeの使用方法を紹介しておきたいと思います。
Youtubeの動画をレスポンシブで埋め込む方法
Youtubeの動画にある「共有」から「埋め込みコード」を選択します。すると下記のようなコードが表示されるのでコピーします。
<iframe width="560" height="315" src="https://www.youtube.com/embed/1rPxiXXxftE" frameborder="0" allowfullscreen></iframe>
このまま貼り付けただけではレスポンシブになりません。【width=”560″ height=”315″】の幅と高さの動画として表示されます。
コピーしたコードをdivタグで囲んでclass名「video-container」を記述すればレスポンシブ動画として表示されます。
video-containerをつけると【width=”560″ height=”315″】の部分は無視されるので、【width=”560″ height=”315″】の部分はなくてもかまいません。
<div class="video-container"> <iframe width="560" height="315" src="https://www.youtube.com/embed/1rPxiXXxftE" frameborder="0" allowfullscreen></iframe> </div>
Youtubeの動画をレスポンシブで表示したもの
ゼルダの伝説 ブレスオブザワイルドのE3のトレーラーです。
まとめ
埋め込みコードをdivで囲ってクラス名追加。簡単ですね。これでyoutubeから動画を埋め込みまくれるぜ！