YouTube動画をディスプレイに合わせて幅100%で貼り付ける！！
今日はDead Or Alive のピート・バーンズが心不全で亡くなったというニュースが流れました。個人的に、若い頃から、Dead Or Alive は大好きだったので、とても残念です。(ToT)
なかには、ピート・バーンズを偲んで、彼の事をブログにまとめてみようなんて思う方もいるかもしれません。僕も、そんな事をちょっと思いましたが、それほど、Dead Or Aliveについて詳しいわけではないので、やめましたけど・・・。(^^;
ここで、実際にまとめようと思えば、やはり、Youtubeにアップされている動画を貼り付けたくなります。ブログへのYoutube動画の貼り付け自体は、Youtubeの各動画から埋め込みコードを取得して、貼り付ければいいだけなので、簡単なんですけど、問題は、その幅なんですよね・・・。
そのまま、貼り付けちゃうと、幅が固定されるので、レスポンシブルデザインの場合は具合が悪いわけです。やはり、ディスプレイによって幅が変わってくれないと・・・。
今回は、Dead Or Alive の曲の中で僕が好きだった「Brand New Lover」をYoutubeから貼り付ける事にして、埋め込みコードを幅広で取得すると、以下のようになります。
<iframe width="1280" height="720" src="https://www.youtube.com/embed/ZWbj64Rwfvc" frameborder="0" allowfullscreen></iframe>
もちろん、このまま貼り付けると、このブログの場合、スマホはもちろん、PCで見ても、横にはみ出てしまいます。そこで、CSSを使って、ディスプレイに合わせて幅100%になるようにします。ちなみに、このCSS自体は、検索すると、あちこちで、微妙に形を変えて紹介されています。考え方としては縦横比を固定した枠の中いっぱいに動画を広げて表示するっていうイメージでしょうか・・・。一つの例を下に書いておきます。
HTML
<div class="youtube"> <iframe width="1280" height="720" src="https://www.youtube.com/embed/ZWbj64Rwfvc" frameborder="0" allowfullscreen></iframe> </div>
CSS
.youtube {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
overflow: hidden;
}
.youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
HTMLは埋め込みコードのiframeをdivで囲っているだけです。
CSSを見て、ちょっと気になるのが、「padding-bottom: 56.25%」の部分です。これはアスペクト比（縦横比）の指定で、計算方法は縦÷横×100になります。HD動画（16:9）の場合なら、9÷16×100=56.25%って事ですね。「padding-top: 25px」は動画上部に入れる飾り線になります。厳密に言うと、これを入れるとアスペクト比が崩れる事にはなるとは思うんですけど・・・。(^^;
実際にYoutubeにアップされていた「Brand New Lover」を貼り付けてみると・・・
場合によっては、PCでは、幅400pxで入れたいけど、スマホなんかでは幅100%にしたいなんて事もあるかと思います。そんな時は、<div class=”youtube”>の外側を幅指定した<div class=”youtube-wrapper”>で囲んでやればOKです。
HTML
<div class="youtube-wrapper"> <div class="youtube"> <iframe width="1280" height="720" src="https://www.youtube.com/embed/ZWbj64Rwfvc" frameborder="0" allowfullscreen></iframe> </div> </div>
CSS
.youtube-wrapper {
width: 400px;
max-width: 100%;
}
実際に「Brand New Lover」を貼り付けてみると・・・
まあ、Youtubeの動画に限らず、iframeを使うものなら、共通して使えるやり方ですよね。
