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

    人気記事ランキングをWordPressに表示するプラグイン「WordP…

  2. wordpress

    WordPressで「データベース接続確立のエラー」が出てサイトが表示…

  3. wordpress

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

  4. wordpress

    【WordPress】記事中に表を追加するプラグイン「WP-Table…

  5. wordpress

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

  6. wordpress

    YARPPのサムネイル画像が潰れる状況を改善する方法

コメント

  • コメント (0)

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

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

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

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

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

sirius

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

SAKU限定特典&レビュー

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

LUREA-plus

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

SAKU限定特典&レビュー

LUREA Plus関連記事
PAGE TOP

SEO対策テンプレート

トレンドアフィリエイト向きワードプレステンプレート3選

wordpress

WordPress

【2019年版】Google mapsがAPI登録しても表示されないときの対策

SEO対策テンプレート

WordPressテーマをTCD「BRIDGE」に変更して使ってみた感想

TCD-BRIDGE

便利ツール

シリウスで作ったサイトをサーチコンソールに登録する方法|サイトマップの送り方

シリウス特典

便利ツール

シリウスの記事タイトルをh3からh2タグに変更する方法

シリウス特典