ブログを続けていけば、Youtubeの動画やInstagramの画像などを記事に埋め込み、共有したいときがあるでしょう。

しかし使用しているブログツールやワードプレスのテーマによっては、それら外部コンテンツに上手く対応できない場合があります。

例えば、デスクトップでは丁度よいサイズで表示されるのに、スマートフォンでは映像がはみ出してしまう。縦横比が合っていない。などです。

 

近年はタブレットやスマートフォンなどを使い、様々な画面サイズで閲覧することが増えました。

そのようなマルチデバイス環境に合わせ、コンテンツのサイズをレスポンシブに対応できるよう調整しないといけません。

大変ですけど、そうやって色んなユーザーが閲覧できるように配慮したサイトは、きっと多くのアクセスを集めるはずです╭( ・ㅂ・)و ̑̑ グッ !"

ここではWordPress記事に埋め込んだYoutube動画を、レスポンシブ対応させる方法を紹介します。

 

Youtube動画を埋め込む

挿入したいビデオのURLをコピーし、そのまま貼り付けます。

 

動画のURLをdiv要素でマークアップ→CSSにてスタイリング

張り付けたビデオのURLをdiv要素で囲みます。

例:<div class=”ytvideo”>URL</div>

 

次に、CSSファイルに次のコードを追加します。

iframe{
  max-width: 100%;
}

/* YouTubeの縦横比を維持 */
.ytvideo{
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  overflow: hidden;
  margin-top: 30px;
  margin-bottom: 30px;
}

.ytvideo iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

 

ワードプレスの場合、ダッシュボードの「外観」「テーマの編集」と進んだ先に、スタイルシート(style.css)と呼ばれるテンプレートがあるので、それを開いて上記コードを書き込みます。

cssファイルを編集する

 

 

埋め込まれたビデオはこちら↓のように、画面サイズに合わせて自動調整されます。

 

div要素でマークアップする工程を自動化

前項で、埋め込んだ動画をレスポンシブに対応することができました。

しかし動画を記事に入れるたびに、毎回divでマークアップする必要があります。

「そんな面倒なことしたくない!」

ということで自動化します。

 

どうやって自動化するのか

次のコードをfunctions.phpに挿入します。

// YouTube動画のURLをdivで囲んであげる関数
function ytwrapper($return, $data, $url) {// ytwrapperという名前で関数を定義
// $return: 埋め込まれたHTML文が代入される
// $data: 埋め込まれたコンテンツのプロバイダ名が代入される
// $url: 埋め込まれたコンテンツのurlが代入される
  if ($data->provider_name == 'YouTube') {// プロバイダ名がYouTubeの場合に{}内を実行
    return '<div class="ytvideo">'.$return.'</div>'; //埋め込まれたHTML要素をdivで囲んで返す
  }
  else {
    return $return; //YouTubeでなければ埋め込まれたHTML文をそのまま返す
  }
}
add_filter('oembed_dataparse', 'ytwrapper', 10, 3);// 埋め込まれたオブジェクトの場所にytwrapper関数をセット

 

functions.phpはテンプレートファイルの一つで、ワードプレスの機能をON/OFFしたり、新たに関数を定義するときに編集します。

編集するには、ワードプレスの管理画面、ダッシュボードの「外観」「テーマの編集」と進んだ先にある、「テーマのための関数」を開きます。

functionsファイルを編集する

 

上記コードの簡単な説明

このコードは、ワードプレスのフィルターフックと呼ばれる機能を活用しています。

埋め込まれたコンテンツが読み込まれるときに、add_filterと呼ばれるタグにてytwrapper関数が自動で起動し、コードを書き換えてくれるのです╭( ・ㅂ・)و ̑̑ グッ !"

 

まとめ

WordPress記事に貼り付けたユーチューブ動画を、レスポンシブ対応させる方法をまとめました。

フィルターフックは私もよく分からないまま使ってますが、上手に扱えればワードプレスのカスタマイズがとても捗ります。

覚えておいて損はないですよ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*