WordPressでカスタムフィールドを使ってYouTube動画を表示させる方法

Webサイト(ホームページ)またはブログでYouTube動画を使っていろんなことしたいと思っている人は結構いるんじゃないかな。
ブログとかニュースみたいな感じでYouTube動画のURLを貼り付けて投稿するのであれば、普通に投稿のテキストエリアにURLを貼り付けるだけでいいんですけど、YouTube動画を使って手の込んだページを作るとなるとカスタムフィールドなどを使う場面が出てきますのでそう簡単にはいきませんよね。
例えばYouTubeチャンネルにアップロードした動画をwebサイトの一部分で使いたい時とか。

もちろんYouTube APIを使ってYouTubeチャンネルの動画を引っ張ってきて使うという手もありますが、APIの仕様変更などで振り回されるのもあれなんで。
YouTubeチャンネルの細かの情報（チャンネル登録者数、再生回数など）は別に必要ないのでしたらなおさらAPIは使わなくていい。

ということでここではYouTubeのURLだけを使ってあれこれしたいときのための方法をご紹介していきます。
簡単にカスタムフィールドを作れるプラグイン「Advanced Custom Fields」を使って簡単に設置していきます。

まずはフィールドを作成。
フィールドタイプはテキストでOKです。

WordPressでカスタムフィールドを使ってYouTube動画を表示させる方法

フィールドを作成したら投稿記事の編集画面で、今回作成した「YouTube URL」のカスタムフィールドに埋め込むYouTube動画のURLを入れます。

YouTube動画のURLが設定できたら次に、表示させるようにPHPファイルを触っていきましょう。

PHPで表示させるコードを書く

WordPressで用意されている関数、wp_oembed_get()を使います。
こちらはoEmbedに対応したページの埋め込み用コンテンツを取得することができる関数。
get_fieldでフィールドの値を取得して、YouTubeのURLを入れます。

PHP

<div class="VideoWrapper">
  <?php echo $embed_code = wp_oembed_get( get_field('youtube_url') ); ?>
</div>

一応、流れの中で動画の有無でコントロールしたい時の場合はこちら。

<?php if( get_field('youtube_url') ){ ?>
 
<div class="VideoWrapper">
  <?php echo $embed_code = wp_oembed_get( get_field('youtube_url') ); ?>
</div>
 
<?php } ?>

これでうまく表示することができます。
今回はYouTubeですが、もちろんTwitterのツイートのURLでもいけます。
試しにInstagramも投稿のURLを入れてみたらなんとなんと、表示された！
WordPressの対応早いよねぇ。

このあと問題になってくることは、レスポンシブ対応ではないだろうか。
そこはCSSでなんとかしましょう。

YouTube動画で苦戦するところは、可変の際の横幅に対する高さとの比率でしょう。横幅を%でコントロールしてもそれに合わせて高さをコントロールしないといけない。

とういわけでそこらへんを踏まえて調整します。

CSSでレスポンシブ対応

CSS

.VideoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
}
 
.VideoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

YouTube動画のベストの比率は16:9。
カルピスでいうところの、原液1に対して水が4の黄金比率みたいな。

比率を計算すると100÷16×9=56.25となります。
なので幅の56.25%を高さとする設定をしてあげます。
これでタブレットやスマートフォンにも対応させることができました。

めでたしめでたし。