Youtube動画をレスポンシブWebデザイン対応にさせる方法

|

レスポンシブWebデザインのWebページにYoutube動画を埋め込むことがあったのでメモです。

(X)HTMLコード

<div class="youtube">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/RLK2In1JMvE" frameborder="0" allowfullscreen></iframe>
</div>

CSSコード

.youtube {
    position:relative;
    width:100%;
    padding-top:56.25%;
}

.youtube iframe {
    position:absolute;
    top:0;
    right:0;
    width:100% !important;
    height:100% !important;
}

Youtube動画は横縦比が16:9なので、横縦比を変えないように画像自体を縮小させようとしたら、横が縮んだらその9/16分、つまり56.25%分も縦が縮まないといけないことになります。それを「padding-top:56.25%;」で実現させています。

この考え方は、比率を変えたくない場合のものを縮小させるのに使えそうですね。勉強になりました。

参考サイト

ありがとうございます。

このページに関連する記事

CSSの小技に関する記事(53)

参考サイト

お勧めCSS教本

Powered by Movable Type 4.21-ja

最近のブログ記事