WordPressやSymfonyのTipsを中心にアニメや日常の出来事について語ります。
メニュー

WordPressではみ出しちゃう動画をレスポンシブ対応にする方法

この記事は約1分5秒で読めます

WordPress 動画のレスポンシブ対応
ゆっきー
ども、カフェブロガーの悠木です。 お気に入りのカフェはドトールコーヒーです。 14時からの限定スイーツ「シューシャポー」が大好きです。

前回の記事でYouTube動画をセンタリングする方法をご紹介しました。

埋め込みコードを使って動画を表示していますが、
widthやheightを固定値で設定しているので、スマホで見たときにはみ出ちゃいます。

こんな感じではみ出ちゃいます。

CSSで動画をレスポンシブ対応する方法

Style.cssに下記のコードを追加する

使い方

実際に表示すると下のようになります。

これでレスポンシブ対応の動画を表示できます。
スマホを縦向き、横向きにしてもブラウザのサイズに合わせて動画サイズが変わるので試してみてください。

動画の横幅の最大サイズを固定化したい場合

動画の横幅の最大サイズを固定化する方法をご紹介します。

Style.cssに下記のコードを追加する

最大の横幅サイズ600pxを指定しています。

使い方

実際に表示すると下のようになります。

参考サイト

紹介したGoose house(グースハウス)について

Goose houseはシンガーソングライターが集まって歌う日本の音楽ユニットです。
私はよくGoose houseを聴きながらブログを書いています。

YouTubeにたくさん歌っている動画がアップされているので興味ある方はぜひ聴いてみてください!

関連記事

  1. Gravator
  2. bxslider
  3. WordPressコメント メールアドレス任意入力
  4. WordPress 管理画面の投稿一覧にPV数を表示する
  5. WordPress Plugin Duplicate Post
  6. N1 mono-lab

コメントをお待ちしております

PR

カテゴリー