2017.05.08

VimeoのサムネイルをWordPressのテンプレートPHPに埋め込んで表示する方法

nakashima
nakashima

 

Webサイトに動画を埋め込みむとき、YouTubeから埋め込むという方法もありますが、コーポレートサイトやクリエイティブなサイトではVimeoを埋め込んでいるケースが多いようです。

 

そこで、今回はVimeoをWordPressサイトに埋め込む方法と、サムネイル画像の取得方法について、紹介します。

 

 

Vimeoの動画を埋め込む

動画の埋め込みはとっても簡単で、
埋め込みたい動画のページに行って『共有』ボタンをクリック。

 

『埋め込み』のコードをコピーしてWordPressのエディッターまたはテンプレートのphpファイルに貼るだけですね。

 

<iframe src="https://player.vimeo.com/video/163319667" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p><a href="https://vimeo.com/163319667">DaVinci Resolve 12.5 - Editing</a> from <a href="https://vimeo.com/mozhenko">mozhenko</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

このURLの最後の数字がVimeoでは動画のIDになっています。

IDを変更すれば他の動画を埋め込むこともできるので、この部分だけをカスタムフィールで入力する、などすると便利になりそうです!

 

 

余談ですが、ちなみに今回試しに埋め込んでみた動画は、映像編集のカラーグレーディングでとても便利な『DaVinci Resolve』というソフトのチュートリアルビデオです。このソフトについてはきっとまた別の機会に。。。

 

 

Vimeoのサムネイルを取得する

ここからが本題の、サムネイル画像の取得です。

Vimeoからサムネイル画像が取得できれば、WordPressのアイキャッチ画像に反映したり、いろいろと使い勝手がいいのですが、iframeで埋め込んだときのように、URLのIDだけ変えればサムネイル画像のURLを取得できるわけではないので、少し注意が必要です。

 

Vimeoの動画の情報はJSONで取得します。

// JSONでVimeoの情報を取得
$url = "https://vimeo.com/api/oembed.json?url=https%3A//vimeo.com/ID" // JSONのURL
$json = file_get_contents($url); // JSONのデータをすべて読み込む
$json = mb_convert_encoding($json, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN'); // UTF-8
$arr = json_decode($json,true); // JSONデータを連想配列にする
echo $arr['thumbnail_url']; // サムネイルの出力 その他の出力について(https://developer.vimeo.com/apis/oembed#php-js-examples)

VimeoのJSONで取得できる情報については公式のVimeo oEmbed APIのページに記載されています。

JSONのURLの最後の”ID”は取得したい動画のIDを入力します。

 

IDをAdvanced Custom Fieldsのフィールドから入力するようにすれば、phpはこのようになります。

 

<?php
// JSONでVimeoの情報を取得
  $video_id = get_field('video_id'); // 'video_id'というカスタムフィールドから入力
  $url = "https://vimeo.com/api/oembed.json?url=https%3A//vimeo.com/" . $video_id; // JSONのURL
  $json = file_get_contents($url); // JSONのデータをすべて読み込む
  $json = mb_convert_encoding($json, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN'); // UTF-8
  $arr = json_decode($json,true); // JSONデータを連想配列にする
  // echo $arr['thumbnail_url']; // サムネイルの出力 その他の出力について(https://developer.vimeo.com/apis/oembed#php-js-examples)
  // thumbnail_url は 295x166 の小さなサイズで返されるので、これを文字列で取り除く
  $thumbnail_url = str_replace('_295x166','',$arr['thumbnail_url']);
 ?>

<!-- サムネイルの画像を出力 -->
<img src="<?php echo $thumbnail_url; ?>" alt="">

このとき、$arrの配列から[‘thumbnail_url’]を取得すると、295×166の小さなサイズの画像になってしまいます。

このURLから’_295x166’の文字を取り除けばフルサイズのサムネイル画像を取得できます。

 

これで無事、サムネイル画像を取得することができました!

サムネイル画像以外の他の情報を取得する場合も同じ方法でできます。

(たとえば、タイトルを取得するには、$arr[‘title’])

 

 

 

 

〜おまけ〜

ちなみに、YouTubeの場合はとっても簡単なので、コードだけ載せておきます😁

 

<!-- YouTubeのデフォルトサイズのサムネイル -->
<img src="http://i.ytimg.com/vi/動画のID/default.jpg" alt="">

<!-- YouTubeのフルサイズのサムネイル -->
<img src="http://i.ytimg.com/vi/動画のID/maxresdefault.jpg" alt="">

 

この記事のタグ