YouTube の URL パターンを整理して videoId を抽出・活用する方法
はじめに
YouTube の動画を Web アプリに iframe で埋め込もうとしたとき、Youtube動画のURLの形式が複数あることに気がついたのでパターンを整理してまとめます。
1. YouTube の代表的な URL パターン
1-1. 通常の視聴ページ URL
https://www.youtube.com/watch?v=VIDEO_ID
# 例
https://www.youtube.com/watch?v=SjmZGTU9tPM
-
vのクエリパラメータに videoId が入っているパターン - 共有ボタンからコピーするとこの形式になることが多い
1-2. 短縮 URL（youtu.be）
https://youtu.be/VIDEO_ID
https://youtu.be/VIDEO_ID?t=30
# 例
https://youtu.be/SjmZGTU9tPM
https://youtu.be/SjmZGTU9tPM?t=30
- パスの最後の部分が videoId
-
t=秒数で再生開始位置が指定されていることがある
1-3. 再生リスト付き URL
https://www.youtube.com/watch?v=VIDEO_ID&list=PLAYLIST_ID
https://www.youtube.com/watch?v=VIDEO_ID&list=PLAYLIST_ID&index=3
# 例
https://www.youtube.com/watch?v=SjmZGTU9tPM&list=PLxxxxx&index=3
-
vが動画 ID、listがプレイリスト ID - Web アプリで「この動画だけ埋め込みたい」場合は
vだけ使えば OK
1-4. チャンネル情報付き URL
検索結果などから開くと、こんな URL になることもあります。
https://www.youtube.com/watch?v=VIDEO_ID&ab_channel=ChannelName
- これも結局
vの値が videoId
1-5. ショート動画（YouTube Shorts）
https://www.youtube.com/shorts/VIDEO_ID
-
/shorts/のあとに videoId - 通常動画と同じように VIDEO_ID を取り出せば埋め込み可能
2. 埋め込み用（iframe）の URL
YouTube が公式で案内している埋め込み URL は以下の形式
https://www.youtube.com/embed/VIDEO_ID
オプション付きの例：
https://www.youtube.com/embed/VIDEO_ID?start=30
https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1
実際の iframe 例：
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/SjmZGTU9tPM"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
3. サムネイル画像の URL パターン
YouTube のサムネイル画像は、静的な URL パターンで取得できます。
基本形
https://img.youtube.com/vi/VIDEO_ID/0.jpg
よく使うパターン
| URL | 説明 |
|---|---|
https://img.youtube.com/vi/VIDEO_ID/max.jpg |
最大サイズ |
https://img.youtube.com/vi/VIDEO_ID/hqdefault.jpg |
高画質 |
https://img.youtube.com/vi/VIDEO_ID/mqdefault.jpg |
中画質 |
https://img.youtube.com/vi/VIDEO_ID/sddefault.jpg |
SD |
https://img.youtube.com/vi/VIDEO_ID/maxresdefault.jpg |
フルHD相当（ない動画もある） |
- どれも VIDEO_ID さえあれば生成可能
-
maxresdefault.jpgは用意されていない動画だと 404 になることがある
maxresdefault.jpg を使う場合は、404 時に hqdefault.jpg へフォールバックする処理を入れておくと安心です。
補足: 共有リンクの si パラメータ
共有ボタンでコピーした URL には si=... というトラッキング用パラメータが
付与されることがあります。videoId の抽出時には無視して問題ありません。
まとめ
VIDEO_IDは基本的に11文字で使用される文字は A-Z, a-z, 0-9, -, _ みたいです
正規表現だと [A-Za-z0-9_-]{11} になります。
抽出ロジックを描く時などに使ってみてね