読者です 読者をやめる 読者になる 読者になる

YouTube埋め込み動画(iframe)レスポンシブ対応

f:id:sumaho-design:20160406131220j:plain

 

このYouTube動画をページに埋め込みつつ、画面サイズに応じて、埋め込んだ動画のサイズも変わるようにしようと思い、単純に幅(width)だけ「100%」にしたけど、縦サイズが変な感じになって上手くいかなかったので調べてみました。

 

 

css

.youtube {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

html

<div class="youtube">
<iframe width="960" height="720" src="https://www.youtube.com/embed/yqrAPOZxgzU" frameborder="0" allowfullscreen></iframe>
</div>

 

iframeの埋め込みコードを「class="youtube"」のdivで囲みつつ、cssで調整すれば、縦横いい感じになります。(class名は何でもいいです。埋め込みコード内の縦横サイズは、YouTubeの埋め込みコード画面で調整してください。)

今回の埋め込みについての参考サイト


どーでもいいですが、PiLの時もクールでいいですが、ピストルズの時のジョンライドンかっこいい。

 

勝手にスマホサイトまとめ|スマホサイトとjQueryMobileのまとめ

勝手にリスティング広告まとめ|テキスト・イメージ広告、ランディングページまとめ