概要
今回担当した案件の中で、HTML内でYoutube動画を再生させる必要があり、
その際に動画のサムネイルを取得して表示させたかったためです。
今後のためにもメモとして残しておこうと思います!
参考記事
作業内容
1. Youtubeの動画IDを確認する
動画のサムネイル画像を表示するために、先に動画のURLに含まれている動画IDを確認します。
https://www.youtube.com/watch?v=
以降に書かれている文字列が動画IDになります。
2. サムネイル画像のURLパスに動画IDを入れる
次にサムネイル画像のURLパスに、動画IDを埋め込みます。
下記のURL内の VIDEO_ID
を実際の動画IDに置き換えて、HTML内に記載してください。
(※サムネイルURLのパターンとしては5種類あるようです、他にもあるかもしれないです)
- デフォルトサムネイル : (120 x 90)
- 中品質サムネイル : (320 x 180)
- 高品質サムネイル : (480 x 360)
- HQ動画サムネイル : (640 x 480)
- FULLHDサムネイル : (1920 x 1080)
3. ブラウザで確認する
指定したサムネイルがきちんとブラウザ上で表示されているかどうか確認してください。