埋め込み禁止が59%の地図は何を見せるべきか — 黒いエラー画面ではなく「なぜ見せられないか」を
status.embeddable 1つで先に分け、マーカーの形・サムネイル・YouTubeボタンでクリック前に知らせる
YouTube動画を地図や一覧に埋め込むサービスを作るとき、再生できない動画をどう扱うかを決めるための記事だ。読み終わると、埋め込めるかどうかを前もって知る方法と、ブロックされた動画を隠さずに見せる画面の組み方を持ち帰れる。
押したら黒い画面
集めたカメラを地図で押してみたら、黒い画面に「動画を再生できません。他のウェブサイトでの再生は、動画の所有者によって無効にされています」と出た。投稿者が外部サイトでの埋め込みをオフにしている動画だ。
数件だろうと思っていた。数えてみたら半分を超えていた。
2026-08-24、埼玉
地図に載せたカメラは58件。再生できるのが24件(41%)、埋め込み禁止が34件(59%)だった。大宮10km圏内だけ見ると、21件中9件しか再生できなかった。
よりによって大宮周辺を埋めてくれていた定型のカメラチャンネル(埼玉県さいたま市○○区…ライブカメラ)が丸ごと禁止設定だった。これは収集を頑張って埋められる種類の空白ではない。この割合がこの地域・この運営者だけの特徴なのか、日本のライブカメラ全般の傾向なのかは、まだ標本を広げて確かめていない。
判定はフィールド1つ
videos.list を part=status で呼ぶと status.embeddable が返ってくる。falseならiframeはエラー画面になる。収集時に一緒に保存しておけば、ユーザーが押すたびにAPIに聞く必要はない。うちはライブかどうかを見るためにどのみちvideos.listを呼んでいたので、追加のコストはなかった。
3つの道
そのまま埋め込むと、クリックの半分が黒いエラー画面で終わる。収集から外すと地図が空っぽになる。大宮周辺は特にそうだ。残るのは全部見せたうえで区別する道で、それを選んだ。
クリックする前にわかるように
まずマーカーを変えた。再生できるカメラは塗りつぶしの丸、埋め込み禁止は中が空いたリングだ。押す前に見分けられる。ツールチップには YouTubeのみ のバッジを付けた。
禁止のカメラを押すと、プレイヤーの代わりにそのカメラのサムネイル(img.youtube.com/vi/{id}/hqdefault.jpg)の上に案内とYouTubeへ飛ぶボタンを出す。黒いエラー枠より情報が多い。サムネイルだけでも、その交差点がだいたいどんな場所かは伝わる。
こう変えたら、「壊れた地図」に見えていたものが「ここはYouTubeで見るカメラ」と読めるようになった。隠すより理由を言う方がいい、というのが今回の結論だ。
まだ確認中のこと
埋め込み禁止の動画のサムネイルをこう使ってYouTubeの規約上問題ないかは、まだ確認している。status.embeddable が配信の途中で変わることがあるのかもわかっていない。変わるなら、取り直す間隔を短くする必要がある。
外部の動画やデータを組み込むサービスで、「見せられないもの」をどう扱うか悩んでいるなら、negabaro に聞いてもらってかまわない。
埋め込み禁止の動画をどう扱うか
| 方法 | 結果 | 合う場面 |
|---|---|---|
| そのまま埋め込む | クリックの半分が黒いエラー画面 | 禁止が数件しかないときだけ |
| 収集から外す | 地図が空く(大宮10km: 21 → 9) | 再生できるものにしか意味がないサービス |
| 区別して見せる | クリック前にわかり、位置の情報は残る | 「どこにあるか」自体が情報になる地図・一覧 |
判定に使う呼び出し
GET /youtube/v3/videos?part=snippet,liveStreamingDetails,status&id=v1,v2,...
# レスポンスの各item
"status": { "embeddable": false, ... } # falseならiframeはエラー画面実践ステップ
videos.listをpart=statusで呼び、status.embeddableを収集時に保存する
マーカーを分ける — 再生可能は塗りつぶしの丸、禁止は中空のリング
禁止のものはプレイヤーの代わりにサムネイル + 案内 + YouTubeボタンを出す
サムネイル利用が規約上問題ないか、embeddableが変わるかは別途確認する