2015年2月アーカイブ

レスポンシブ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%;」で実現させています。

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

参考サイト

ありがとうございます。