こんにちは、なりかくんと申します。
この記事はなりかくん Advent Calender 2023の17日目の記事です。
今回は、YouTube IFrame Player APIで動画タイトルを取得する方法を紹介します。
YouTube IFrame Player APIとは
YouTube IFrame Player APIというのは、iframeでYouTube動画を埋め込む際に使えるAPIのことです。
使い方などは、公式リファレンスが分かりやすいかと思います。
動画タイトル取得方法
動画タイトルを取得するには、PlayerにgetVideoData()すると動画データを取得できます。そこにタイトルがあります。
例えば、YOASOBIさんのアイドルの動画（ZRtdQ81jPUQ）に対してgetVideoData()をするとこのようなデータが返ってきます。
{
"video_id": "ZRtdQ81jPUQ",
"author": "",
"title": "YOASOBI「アイドル」 Official Music Video",
"isPlayable": true,
"errorCode": null,
"backgroundable": false,
"cpn": "kwvWmrvyDc1BLkp3",
"isLive": false,
"isWindowedLive": false,
"isManifestless": false,
"allowLiveDvr": false,
"isListed": false,
"isMultiChannelAudio": false,
"hasProgressBarBoundaries": false,
"isPremiere": false,
"progressBarStartPositionUtcTimeMillis": null,
"progressBarEndPositionUtcTimeMillis": null,
"paidContentOverlayDurationMs": 0
}
投稿者の名前などは取得できませんが、タイトルは取得することが出来ます。
ただ、API的には取得できるのです。開発者ツールで通信を見てみると、このように取得できています。
※ID系は省略しています。
{
"embeddedPlayerOverlayVideoDetailsRenderer": {
"channelThumbnail": {
"thumbnails": [
{
"url": "https://yt3.ggpht.com/ytc/AIf8zZSmlCIR_p1viztNdy2mRfipM60GcQcCmgPHt_wCJQ=s88-c-k-c0x00ffffff-no-rj-mo",
"width": 68,
"height": 68
}
]
},
"collapsedRenderer": {
"embeddedPlayerOverlayVideoDetailsCollapsedRenderer": {
"title": {
"runs": [
{
"text": "YOASOBI「アイドル」 Official Music Video",
"navigationEndpoint": {
"clickTrackingParams": "",
"urlEndpoint": {
"url": "http://www.youtube.com/watch?v=ZRtdQ81jPUQ"
}
}
}
]
},
"subtitle": {
"runs": [
{
"text": "3.8億 回視聴 • 14万 件のコメント"
}
]
},
"trackingParams": ""
}
},
"expandedRenderer": {
"embeddedPlayerOverlayVideoDetailsExpandedRenderer": {
"title": {
"runs": [
{
"text": "Ayase / YOASOBI"
}
]
},
"subscribeButton": {
"subscribeButtonRenderer": {
"buttonText": {
"runs": [
{
"text": "登録済み"
}
]
},
"subscribed": true,
"enabled": true,
"type": "FREE",
"channelId": "UCvpredjG93ifbCP1Y77JyFA",
"showPreferences": false,
"subscribedButtonText": {
"runs": [
{
"text": "登録済み"
}
]
},
"unsubscribedButtonText": {
"runs": [
{
"text": "チャンネル登録"
}
]
},
"trackingParams": "",
"unsubscribeButtonText": {
"runs": [
{
"text": "登録解除"
}
]
},
"serviceEndpoints": [
{
"clickTrackingParams": "",
"subscribeEndpoint": {
"channelIds": [
"UCvpredjG93ifbCP1Y77JyFA"
],
"params": "EgIIBxgA"
}
},
{
"clickTrackingParams": "",
"unsubscribeEndpoint": {
"channelIds": [
"UCvpredjG93ifbCP1Y77JyFA"
],
"params": "CgIIBxgA"
}
}
],
"notificationPreferenceToggleButton": {
"toggleButtonRenderer": {
"isToggled": false,
"isDisabled": false,
"defaultIcon": {
"iconType": "CHANNEL_NOTIFICATION_PREFERENCE_OFF"
},
"defaultServiceEndpoint": {
"clickTrackingParams": "",
"modifyChannelNotificationPreferenceEndpoint": {
"params": ""
}
},
"toggledIcon": {
"iconType": "CHANNEL_NOTIFICATION_PREFERENCE_ON"
},
"toggledServiceEndpoint": {
"clickTrackingParams": "",
"modifyChannelNotificationPreferenceEndpoint": {
"params": ""
}
},
"trackingParams": "",
"defaultTooltip": "新着動画に関する通知が届きます",
"toggledTooltip": "新着動画に関する通知が届かないようにします"
}
}
}
},
"subtitle": {
"runs": [
{
"text": "チャンネル登録者数 616万人"
}
]
},
"trackingParams": ""
}
},
"channelThumbnailEndpoint": {
"clickTrackingParams": "",
"channelThumbnailEndpoint": {
"urlEndpoint": {
"clickTrackingParams": "",
"urlEndpoint": {
"url": "/channel/UCvpredjG93ifbCP1Y77JyFA"
}
}
}
}
}
}
原因はわかりませんでした。
もっと簡単に動画タイトルを取得する
わざわざ関数を呼び出さなくてもPlayerにvideoTitleがあるのでそれを使えば簡単に取得できます。
{
"videoTitle": "YOASOBI「アイドル」 Official Music Video"
}
簡単ですね！
これを使ってサービスを作った
最後にこれを使って作ったサービス紹介です。
最近XでYouTubeのリンクを貼ると非表示になる（シャドウバン食らう）という噂を聞くので回避リンクを作りました。
通常のYouTubeの動画リンクはこのようなリンクになります。
https://www.youtube.com/watch?v=ZRtdQ81jPUQ
これをXにポストするとダメみたいなので（youtube.comが含まれてるとダメみたい？）、youtube.comをur0.ccに変えるだけで回避リンクを作れるようにしました。
https://www.ur0.cc/watch?v=ZRtdQ81jPUQ
このリンクを開くと、このように動画とタイトルが表示される簡単なページです。
需要があるかというと無いと思う。
最後に
これを使って何かできれば楽しそうだなと思いました。（もっと画期的なやつ）
最後までお読みいただきありがとうございました。