埋め込みYoutubeのDOMをJavaScriptで取得したいがなぜか取得できない

Question

前提・実現したいこと

iframeでYoutube動画が読み込まれると、iframe内にhtmlDOMが生成されます。それらDOMを取得したいです。
（最終的にはiframeで埋め込んだYoutube動画（再生リストの動画）で再生できなかった場合、次の曲へ切り替わるようにしたいです。）

発生している問題・エラーメッセージ

    <iframe
    id="youtubePlayer"
    src="https://www.youtube.com/embed/videoseries?list=RDs5hXASfza_Q&index=2"
    frameborder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
  ></iframe>

上記のタグを埋め込んでiframeAPIを叩かずに動画の変化を検知したいです。（検知自体はMutationObserverメソッドを使用でできそうです）
しかし、<script src="hoge.js"></script>として埋め込んだコードを流して、iframe内のDOMを取得しようとしてもnullが返ってきます。
chromeのデバッガのコンソール画面で要素を指定すれば取得できるのですが、<script src="hoge.js"></script>として埋め込んだコードからだと取得できません。

該当のソースコード

https://jsfiddle.net/nxq1pLge/2/
上はプレイグラウンドのシェアURLです。上記サイトの内でRunして別にデバッガを開いてYoutube動画のiframe要素を開くとiframe内にhtmlDomが派生していることを確認できると思います。

試したこと

setTimeoutを使ったり、同期処理を行いタイミングをずらしても取得できませんでした。

補足情報（FW/ツールのバージョンなど）

Chromeの環境のみで使用します。
生JavaScriptで取得したいです。（document.getElementbyIdなど）

Answer 1

同一オリジンポリシーがあるため、サーバ側（YouTube側）から許可が明示されない場合、リソースへのアクセスは制限されます。APIが提供されているならその範囲で処理する以外ありません。

【同一オリジンポリシー - ウェブセキュリティ | MDN】
https://developer.mozilla.org/ja/docs/Web/Security/Same-origin_policy

同一オリジンポリシーとは、あるオリジンから読み込まれた文書やスクリプトについて、そのリソースから他のオリジンのリソースにアクセスできないように制限するものです。

Comments

[moimoi_sushi]

ありがとうございます、そうなんですね。APIでも試してみたのですが上手くいかなかったのですが、他に方法がなかった場合、もう一度APIで試してみます。
YouTube Player APIです。
https://developers.google.com/youtube/iframe_api_reference?hl=ja

Answer 2

結果として、「IFrame Player API」を使用して実現しました。
拡張機能を経由してYoutubeを埋め込んでいたためAPIをできる限り叩きたくなかったのですがGUI操作するよりはマシだったかなと思います。