ブログの動画をスマホで見たら幅がでかすぎて困った話
このブログとは別に、子供を撮影したビデオを編集して作った動画をアップしたりする完全趣味のブログを持ってます。
YouTubeやDailymotionにアップロードした動画をブログに貼り付けるんですが、スマホで見ると幅が大きすぎて画面からはみ出しています。
再生すればプレイヤーのサイズになるので問題ないんですが、ちょっとみっともないので対策してみたというお話。
動画をスマホの幅に合わせる
「YouTube スマホ 幅」というようなキーワードで検索すると、いろいろと参考になるサイトがあるんですが、やっぱりCSSで指定するのがいいみたいです。
参考にしたサイト↓
テーマのスタイルシート(style.css)に記述
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.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で囲みます。
1 2 3 |
<div class="haba" ><iframe src="//www.youtube.com/embed/kkkkkkkkkkk" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe> </div> |
こんな感じ↑
とりあえずやってみましたが、うまくいったので良しとします。
スマホで動画を見る人って
今回はブログのスマホビュー改善ということで、埋め込み動画の幅を調整するというネタでしたが、スマホで動画を見ることって普通は多いんですかね。
うちの子供が私のスマホでYouTube見まくって、通信量オーバーになったことがあったんですが、皆さんは大丈夫?
ディスカッション
コメント一覧
まだ、コメントがありません