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

最近の作業実績

  • 2020年07月04日固定ページのみ404エラーが発生する不具合を修正いたしました。
  • 2020年07月02日検索結果数をリアルタイムで表示できるようにカスタマイズしました。
  • 2020年07月02日ログイン画面に発生したレイアウトの崩れを修正しました。
  • 2020年06月29日サイト内の画像が表示されなくなった不具合を解決いたしました。
  • 2020年06月29日検索結果ページのページネーションの不具合を修正いたしました。
  • 2020年06月29日旧テーマのデザインを新テーマに移植しました。
  • 2020年06月20日セキュリティ対策に関するアドバイスをさせていただきました。
  • 2020年06月20日既存テーマの記事一覧のレイアウトをカスタマイズいたしました。
  • 2020年06月20日既存サイトのテスト環境を構築いたしました。
  • 2020年06月17日サイトのレイアウト崩れを修正いたしました。
  • 2020年06月16日絞り込み検索の検索項目を調整いたしました。
  • 2020年06月12日Twitterのシャドウバンの解除をお手伝いしました。
  • 2020年06月12日ハッキング被害に遭ったサイトを復旧いたしました。
  • 2020年06月12日テーマ切り替えに伴う不具合を修正いたしました。
  • 2020年06月08日WordPressのセキュリティ対策を強化いたしました。
  • 2020年06月08日WordPressを高速化いたしました。
  • 2020年06月05日特定のページにのみBasic認証を導入いたしました。
  • 2020年06月04日RSSフィード内でショートコードを無効にするカスタマイズを行いました。
  • 2020年06月03日絞り込み検索機能と検索結果の並び替え機能を実装いたしました。
  • 2020年06月03日長らく更新していなかったWordPressのバージョンアップを行いました。
  • このエリアには直近の制作実績を一部掲載しております。
  • 制作実績はリアルタイム反映ではありません。
  • 記事公開:2016/09/10
  • 最終更新:2020/05/25

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

この投稿は2020/05/25に加筆修正いたしました。

投稿に埋め込んだYOUTUBE動画がレスポンシブにならない・・・。
スマホで見ると画面からはみ出している・・・。

そんなお悩みをお持ちではありませんか?

投稿に埋め込んだYOUTUBE動画をレスポンシブに対応させるのは難しくありません。
実は2回コピペするだけでレスポンシブに対応することができるのです。

このカスタマイズ、1回やってしまえば、動画を埋め込むごとに特別な操作は必要あります。
動画を設置するだけで、自動的にレスポンシブに対応してくれます。

今回は、投稿に埋め込んだYOUTUBEを自動的にレスポンシブに対応させる方法をご紹介します。

興味のある方は、続きをどうぞ!

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

WordPressのカスタマイズはお任せください。

WordPressのカスタマイズを格安で代行いたします。ご希望のカスタマイズがあればご相談ください。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

YOUTUBE動画の埋め込みコードを自動的に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動画をレスポンシブに対応させる

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

岡山在住のWordPress専門フリーランサーです。Wordpressを使ったWEBサイト制作を中心に10年間ほど活動させていただいています。

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

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

コメントを残す

(必須)

CAPTCHA