Webノートデス

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

      2014/12/19

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

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

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

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

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

参考にしたサイト↓

 

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

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

こんな感じ↑

とりあえずやってみましたが、うまくいったので良しとします。

スマホで動画を見る人って

今回はブログのスマホビュー改善ということで、埋め込み動画の幅を調整するというネタでしたが、スマホで動画を見ることって普通は多いんですかね。
うちの子供が私のスマホでYouTube見まくって、通信量オーバーになったことがあったんですが、皆さんは大丈夫?

 - WEB作成

ad

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

画像に適切なフォーマットと圧縮を選ぶことで、データ サイズを大きく削減できますとPageSpeed Insightsに言われちゃった

アドセンスの管理画面のスコアカードに「サイトの状況」というのがありますよね。スコ …