WordPressを用いたホームページ制作はお任せください!岡山県を中心に絶賛活動中!
  • WordPressに埋め込んだYOUTUBE動画をレスポンシブに対応させる方法

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

cuba-1197800_1280

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

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

WordPressにYOUTUBE動画を埋め込む方法

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

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

その方法とは、動画再生ページのURLを貼り付けるだけです。
例えば、以下の動画URLを貼り付けたとしましょう。

https://www.youtube.com/watch?v=80kFIFmHX38

すると、以下の様に動画が埋め込まれます。

簡単ですね!

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動画がレスポンシブ対応になります。

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

シェアしていただきありがとうございます。

cuba-1197800_1280

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

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

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

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

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

詳細を確認する

著者:とあるWEBディレクター

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

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

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

  • F100006377

    一括削除!不要になったカスタムフィールド名を削除するならDeleteCustomFieldsで決まり!

    不要になったカスタムフィールドの変数をプラグインのDeleteCustomFieldsで削除する方法をご紹介しています。不要なカスタムフィールドが増えて困っている方は参考にしてください。5分程度でカスタムフィールドをスッキリとさせることができます。 記事を読む

  • PAK12_10many500 (1)

    WordPressの投稿・固定ページ・カテゴリーなどのIDを調べる方法

    WordPressの記事や固定ページ、カテゴリーなどには個別のIDが振り分けられています。このIDですが、何かしらのカスタマイズなどで必要になる機会が割りと多くあるように感じます。このページでは、記事・固定ページ・カテゴリーのIDを取得する方法をご紹介します。 記事を読む

  • squirrel-1401509_1280 (1)

    カスタムフィールドの改行を反映させたまま表示する方法

    カスタムフィールドの改行を反映させたまま表示する方法をご紹介します。カスタムフィールドのテキストエリアで改行がそのまま反映されたら便利だと思いませんか?気になる方はこのコンテンツを2分間だけ読んでください。改行を反映させる方法がマスターできます。 記事を読む

  • wordpress-theme-confirmation_a

    あのサイトが利用しているWordPressテーマを調べる方法

    WordPressで構築されたサイトを見ていると、そのサイトで利用されているテーマが何なのか、無性に気になることってありませんか?そんな時にパッと利用されているテーマを調べる方法をご紹介します。 記事を読む

  • MIMIYAKO85_sagyousurudansei20140725500

    WordPressサイトに前後記事へのリンクを表示させる方法

    WordPressで構築したサイトに前後記事へのリンクを表示させる方法をご紹介します。記事ページの下部などでよく見かける「前の記事」「次の記事」といったナビゲーションリンクです。1分で表示できますので、参考にしてください。 記事を読む

コメントを残す


(必須)

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