WordPress

youtube

Youtube動画をレスポンシブ対応にする方法

サイト作成時にYoutube動画を記事に埋め込んだりしてますか?

動画を使うことでサイト滞在時間を延ばすことができるため、SEO的にも有効とされています。

関連する動画や自分で作成する動画があれば積極的に使っていきましょう。

とは言ったものの普通にYoutube動画を設置するとスマホでサイトを閲覧したときに

画面から動画がはみ出てしまいます。

下の画像が実際に何も変更せずに記事に載せた動画です。

Screenshot_2014-03-20-20-38-23

動画の中心が画面の右側にあるので、動画の右半分がはみ出てしまっています。

これだとせっかくサイトに訪問してくれた人が動画を快適に閲覧できないですね^^;

そこでWordPressのCSSを変更することでYoutube動画も画面ピッタリに

レスポンシブ化することができます。

 

そのやり方ですが、まずCSSに以下の内容を追加します。

次にYoutube動画の共有コードを記事に入れるときに以下のようにdivで囲みます。

これだけで動画がレスポンシブ化になります。

では、実際にスマホでサイトを見てみましょう。

Screenshot_2014-03-20-19-29-53

画面にピッタリと収まりましたね!

非常に簡単な変更でレスポンシブ化することができるので、

Youtube動画をサイトに載せるときには使ってみてくださいね!

関連記事

  1. wordpress

    moreタグの下にGoogleアドセンスを表示するMaster Pos…

  2. wordpress

    ロリポップでSimple Custom CSSを使うと403エラーが出…

  3. wordpress

    【WordPress】合わせて読みたい記事を表示するプラグイン「YAR…

  4. wordpress

    安全にWordPressを使用するためのセキュリティ対策方法

  5. wordpress

    WordPressの画像をポップアップするLightboxプラグイン【…

  6. wordpress

    WordPressのスパムコメント対策を実現するプラグイン【Throw…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

最強のWordPressテンプレート「賢威」

wordpress-keni

WordPressのSEO対策が気になるならWordPressテンプレートの最高峰「賢威」で間違いありません。

SAKU限定特典&レビュー

究極のサイト作成ツール「シリウス」

sirius

サイトアフィリエイトをより効率的に効果的に進めるサイト作成ツールならシリウス一択です。サイトアフィリエイトの神器みたいなものですよ!

SAKU限定特典&レビュー

アフィリエイトのバイブル「LUREA plus」

LUREA-plus

本気で稼ぐために必要なノウハウがギュッと詰め込まれた、全てのアフィリエイターのバイブルとなる教材です。 アフィリエイトの基礎からしっかりと取り組めます。 再現性も抜群です!

SAKU限定特典&レビュー

LUREA Plus関連記事
PAGE TOP