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

このリンクを開くと、このように動画とタイトルが表示される簡単なページです。

~~需要があるかというと無いと思う。~~

最後に

これを使って何かできれば楽しそうだなと思いました。（もっと画期的なやつ）
最後までお読みいただきありがとうございました。