youtubeをレスポンシブにする

一日に多分、5時間くらいはyoutubeを使用してるヘビーユーザーなので書いておく。

【HTML】
<div class="move">
/*動画の埋め込みコード*/
</div>
【CSS】
.move{
position:relative;
width:100%;
paddingtop:56.25%;
}
.move iframe{position:absolute;
top:0;
right:0;
width:100%;
height:100%;
}

こちら参考にさせていただきました。
http://www.html5-memo.com/webtips/responsive-movie/
めちゃめちゃ分かりやすくて本当に助かります。。

ついでに…
width調整するときはdivでもうひとつ親要素を増やして、
そこにwidth指定すればOK。
.move自体に指定すると動画サムネの大きさも変わるのでダメですね
考えてみれば当たり前ですわ。

<div class=""move_wrapper>
<div class="move">
/*動画の埋め込みコード*/
</div>
</div>

おすすめ