Youtube動画の埋め込みをCSSでレスポンシブ対応する
｜
スポンサードリンク
おはこんばんちわハクロンです。
普通にwidth="100％"などの対応ではスマホなどで見た場合縦幅がそのままになってしまうなど、そのままの比率でうまく縮小されません。
Youtubeなどの外部サービスを埋め込む際にCSSでレスポンシブ対応させる簡単な方法を書きます。
HTML側の記述 divタグでclassをつけます。
<div class="youtube"> <iframe width="854" height="480" src="https://www.youtube.com/embed/cLYAVPgrWME" frameborder="0" allowfullscreen></iframe> </div>
CSS側の記述
.youtube {
position: relative;
width: 100%;
padding-top: 50%;
}
.youtube iframe {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}
これだけで対応完了です。縮小しても画面の比率は変わりません。
iframeのwidth heightより!importantルールを使うことでCSSスタイルを優先することができます。
ちょっとした贅沢？
スポンサードリンク
コメントを書き込む