WordPressに埋め込んだYOUTUBE動画をレスポンシブに対応させる方法
  • WordPressに埋め込んだYOUTUBE動画をレスポンシブに対応させる方法
  • 記事公開:2016/09/10
  • 最終更新:2018/05/20

WordPressに埋め込んだYOUTUBE動画をレスポンシブに対応させる方法

サイト内に埋め込んだYOUTUBE動画をレスポンシブに対応させる方法をご紹介します。スマホでサイトを観覧した時でも、もうYOUTUBE動画が画面からはみ出すことはありません。このカスタマイズは3分間でマスターできます!

この記事は約 6 分で読めます。

WordPressサイトの常時SSL化はお任せください。

ADhttps://wordpress-supporters.com/wordpress-ssl/

常時SSL化されていないサイトにGOOGLEが警告文を表示させるまであと僅か!
今すぐにでも必要なWordPressサイトの常時SSL化は、プロに丸投げしてください。
今だけ20,000円OFF、GOOGLE対策、リミット間近、サポート充実。

WordPressにYOUTUBE動画を埋め込む手順

まずは、YOUTUBEの動画をWordPressサイトに埋め込む方法をご紹介します。

YOUTUBEの動画を埋め込む時は、サイズや詳細な設定をすることもできるのですが、
今回は最も単純な方法をご紹介します。

その方法とは、YOUTUBE動画のURLをテキストエディタに貼り付ける方法です。

まずは、サイトに埋め込みたいYOUTUBE動画の再生ページにアクセスします。

動画プレイヤーの下部に【共有】というリンクがありますので、こちらをクリックします。

エリアが展開され、その中に【URL】が表示されます(上記画像の赤枠部分)。
このURLをコピーしましょう。

あとは、コピーしたURLをWordPress投稿画面の【テキストエディタ】から動画を埋め込みたい場所に貼り付ければ動画の埋め込みは完了です。

上記の手順が面倒な方は、動画再生ページのURLをコピーして使っても構いません。

URLを貼り付けた箇所に、上記の様に動画が表示されれば埋め込み作業は成功です。

WordPressに埋め込んだYOUTUBEをレスポンシブに対応させる方法

続いて埋め込んだ動画をレスポンシブに対応させる方法をご紹介します。
YOUTUBE動画は単に埋め込んだだけではレスポンシブに対応されません。

レスポンシブに対応するとは、デバイスの横幅に合わせて動画が縮小表示されることです。
単に設置しただけですと小さいデバイスの場合、動画がはみ出してしまいます。

動画をレスポンシブに対応させるためには、以下の2つの作業を行います。

埋め込みコードを自動的にdivタグで囲ませる。

YOUTUBEの動画をレスポンシブに対応させる場合、埋め込みコードをdiv要素で囲む必要があります。
このdiv要素がレスポンシブ対応のきもです。

このコードを埋め込みコードを設置するたびに書き込むのは非常に面倒です。
そこで、埋め込みコードを記述すると自動的に囲まれるようにカスタマイズしましょう。

カスタマイズはコピペだけでOKです。
functions.phpに以下のコードをコピペしてください。

function iframe_in_div($the_content) {
if ( is_singular() ) {
$the_content = preg_replace('/<iframe/i', '<div class="youtube"><iframe', $the_content);
$the_content = preg_replace('/<\/iframe>/i', '</iframe></div>', $the_content);
}
return $the_content;
}
add_filter('the_content','iframe_in_div');

このコードを埋め込むことで、YOUTUBEの埋め込みコードを設置すると、自動的に【<div class=”youtube”>】で囲まれるようになります。

CSSでレスポンシブに対応させましょう。

YOUTUBEをレスポンシブに対応させるのは、CSSの定義だけでOKです。

先ほどfunctions.phpにコードを埋め込んだことで、YOUTUBEの埋め込みコードを記述すると自動的に【<div class=”youtube”>】で囲まれるようになっています。

そのため、埋め込まれたYOUTUBE動画の部分は以下の様なHTMLになっています。

<div class="youtube">
<iframe></iframe>
</div>

そこで、以下の様にCSSを定義することで埋め込んだ動画をレスポンシブに対応させることができます。

.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}

.youtube iframe{
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}

上記のコードの解説は今回は省きます。
内容が少々複雑なので、逆に難しく感じるかと考えたためです。

ひとまず、ここまでの作業で埋め込んだYOUTUBE動画はレスポンシブ対応となりました。
どの様な感じになるのかは、このコンテンツの上部に設置してある動画をご覧ください。

PCで観覧中の方は、ブラウザのサイズを縮小拡大してみてください。
横幅に合わせて動画が縮小拡大されているのが確認できます。

スマホで観覧中の方は、デバイスの向きを縦横と変えてみてください。
横幅に合わせて動画が縮小拡大されているのが確認できます。

まとめ

WordPressに埋め込んだYOUTUBE動画をレスポンシブに対応させる方法をご紹介しました。

ちょっと難しいように感じたかと思いますが、実際は簡単な作業です。
一度設定しておけば、今後は全てのYOUTUBE動画がレスポンシブ対応になります。

この機会にカスタマイズしてみてください。

今回のコンテンツに関する疑問点、WordPressの操作方法やプラグインに関するご質問など、下記の無料メールサポートからお気軽にお問い合わせください。

回答できるお問い合わせには、全て回答をさせていただきます。

無料メールサポート

必須メールアドレス
必須サポートを希望する内容

確認事項

上記で入力していただいたメールアドレスに回答メールをお送りいたします。メールを受信できるメールアドレスをご記入ください。

質問に対する回答は、基本的に24時間以内の返信を心がけておりますが、質問が集中した場合、最長で返信に72時間のお時間を頂戴いたします。

当方で回答できる質問には全て回答をさせていただきます。ただし、全ての質問に対して明確な回答をご提供できるわけではありません。

個人情報保護法その他の法令に基づき開示が認められる場合を除き、あなたの個人情報を第三者に開示することはありません。個人情報保護法及び行政書士法に基づき個人情報等を厳重に管理し機密保持に努めるものとします。ただし、情報の漏洩、消失、他者による改ざん等が完全に防止されることについての保証は一切行いません。

ご記入いただいた個人情報は、質問に対する回答の送信と、メールマガジンの配信にのみ使用させていただきます。

上記のフォームから無料メールサポートご利用された方は、定期的または不定期に、Wordpress関連の最新情報、Wordpressのカスタマイズ方法、Wordpress関連のプレゼント企画や、広告などが掲載された「takayakondo.com」が発行するメールマガジンが配信されることに同意したものとします。

メールマガジンへは、「takayakondo.com」運営者によって後日に代理登録をさせていただきます。代理登録されるまでに、しばらく時間を要する場合がございます。

メールマガジンは、利用者の判断でいつでも購読を解除することができます。

この記事が気に入ったら【いいね】しよう!

WordPressサイトの常時SSL化はお任せください。

ADhttps://wordpress-supporters.com/wordpress-ssl/

常時SSL化されていないサイトにGOOGLEが警告文を表示させるまであと僅か!
今すぐにでも必要なWordPressサイトの常時SSL化は、プロに丸投げしてください。
今だけ20,000円OFF、GOOGLE対策、リミット間近、サポート充実。

Wordpressサイトのカスタマイズで
お困りではありませんか?

あなたのWordpressサイトを、ご希望に沿ってカスタマイズいたします。
次に該当する方は、お気軽にご相談下さい。

  • Wordpressサイトをカスタマイズしたいが、やり方が分からないで困っている。カスタマイズの知識が豊富な人に任せたい。
  • Wordpressサイトをカスタマイズしたいが、自分でカスタマイズする暇がない。カスタマイズが得意な人に丸投げしたい。
  • Wordpressサイトをカスタマイズしてみたが、上手くカスタマイズできなかった。カスタマイズ経験が豊富な人に任せたい。
  • Wordpressサイトをカスタマイズしてみたら、バグが発生して困っている。正常に動作するように正しくカスタマイズしてほしい。

一つでも該当する方は、以下のリンクからチェックしてみてください。

詳細を確認する

現在、上記サービスは別ドメインで運用しております。
ドメインは異なりますが、わたしが提供させていただいているサービスです。

著者:takaya kondo

岡山在住のWebディレクターです。Wordpressを使ったWEBサイト制作を中心に10年間ほど活動させていただいています。

Wordpress関連の記事でお役に立てれば幸いです。

【関連記事】あなたが興味のありそうな関連記事をご紹介します。

  • 2016-02-22

    WordPressのプラグインとは?プラグインを使ってWordPressの機能を拡張しよう!

    WordPressのプラグインについてまとめてみました。プラグインに関して知識の少ない方はぜひ参考にしてください。5分後にはWordPressのプラグインについての基本的な知識をマスターすることができます。 記事を読む

  • 2015-01-25

    WordPressで特定のカテゴリーに分類されている子カテゴリー一覧を表示する方法

    WordPressで特定の親カテゴリーに分類されている子カテゴリー一覧を表示する方法をご紹介します。とある仕事で必要となり実現する方法を調べました。同じことがしたい方は参考にしてください。 記事を読む

  • 2015-03-01

    【WordPress】プラグインを使わず検索機能に絞り込み機能を実装しよう。

    WordPressの検索機能にカテゴリーやタグを指定した絞り込み機能を実装する方法をご紹介します。コピペで簡単に実装できますので、興味のある方は参考にしてください。 記事を読む

  • 2015-10-07

    WordPress管理画面のあなたのプロフィールで項目を追加したり削除する方法

    WordPress管理画面のあなたのプロフィールで項目を追加したり削除する方法をご紹介します。プロフィールの項目を増やしたい方や減らしたい方は参考にしてください。コピペだけで3分後にはプロフィールの項目を自由自在にカスタマイズできてしまいます。 記事を読む

  • 2016-04-24

    カスタムフィールドの値が空だった場合の条件分岐

    2016/4/24にコードを修正しました。カスタムフィールドで値が入力されていない項目を非表示にする条件分岐をご紹介。カスタムフィールドに値を記入しなくても良い場合など、空白になるそのエリア自体を非表示にしたい時ってありますよね。今回はそんな方法をご紹介しています。 記事を読む

コメントを残す


(必須)