ブログの動画をスマホで見たら幅がでかすぎて困った話

2014年12月14日2014年12月19日

このブログとは別に、子供を撮影したビデオを編集して作った動画をアップしたりする完全趣味のブログを持ってます。

YouTubeやDailymotionにアップロードした動画をブログに貼り付けるんですが、スマホで見ると幅が大きすぎて画面からはみ出しています。

再生すればプレイヤーのサイズになるので問題ないんですが、ちょっとみっともないので対策してみたというお話。

動画をスマホの幅に合わせる

「YouTube スマホ幅」というようなキーワードで検索すると、いろいろと参考になるサイトがあるんですが、やっぱりCSSで指定するのがいいみたいです。

参考にしたサイト↓

http://scope.minibird.jp/niji-life/archives/482

埋め込んだYouTubeなどの動画をスマホ用にCSSで最適化する方法

テーマのスタイルシート(style.css)に記述

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

.haba {

position: relative;

padding-bottom: 56.25%;

padding-top: 30px;

height: 0;

overflow: hidden;

}

.haba iframe,

.haba object,

.haba embed {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

あとは動画のコードをdiv classで囲みます。

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

<div class="haba"