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

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

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

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

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サイトのカスタマイズで
お困りではありませんか?

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

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

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

詳細を確認する

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

著者:takaya kondo

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

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

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

  • 2016-01-19

    WordPressのパンくずナビをGoogleリッチスニペットに対応させる方法

    WordPressのパンくずナビをGoogleリッチスニペットに対応させる方法をご紹介します。コピペで対応できるようにしておりますので、初心者の方でも3分程度でWordPressのパンくずナビをGoogleリッチスニペットに対応させることができます。 記事を読む

  • 2014-11-23

    そのサイトがWordPressで作られているサイトなのかを確認する2つの方法

    活用シーンはあまり多くないかもしれませんが、特定のサイトがWordPressで作られているサイトなのかを確認する方法をご紹介いたします。「このサイトってWordPressで作られているサイトなの?」と疑問に感じたときなどにご利用ください。 記事を読む

  • 2017-08-17

    【Search Regex】WordPressサイト内のキーワード一括置換に便利なプラグイン

    Search Regexで投稿や固定ページの内容を一括置換する方法をご紹介します。管理画面から特定の文字列を検索し、一括置換できれば便利だと思いませんか?プラグイン「Search Regex」なら一括置換が簡単に行えます。 記事を読む

  • 2015-02-01

    WordPress管理画面のフッターテキストを変更する方法

    WordPress管理画面のフッターテキストを変更する方法をご紹介します。とある案件でカスタマイズ方法を勉強しましたのでシェアします。管理画面フッターのテキストを自由に変更する方法です。参考にしてください。 記事を読む

  • 2015-03-22

    ビジュアルリッチエディターを非表示にする方法

    WordPressのビジュアルリッチエディターを非表示にする方法をご紹介します。テキストエディターしか使わない方、参考にしてください。 記事を読む

コメントを残す


(必須)