JS код для получения идентификатора Youtube Livestream Video

Question

Я пытаюсь создать веб-страницу, которая показывает прямую трансляцию моего канала, но также отображает чат прямой трансляции. Используя код iframe sr c, предназначенный для прямых трансляций каналов, я смог заставить сайт отображать все видео, которые транслируются в данный момент:

src = "https://www.youtube.com/embed/live_stream?channel=MY_CHANNEL_ID"

Тем не менее, используя код чата Youtube iFrame, я могу настроить таргетинг только на определенный видео чат c.

src = "https://www.youtube.com/live_chat?v=VIDEO_ID&embed_domain=MY_DOMAIN

Как таковой Я пытаюсь использовать код JS для извлечения идентификатора видео в прямом эфире из iFrame для прямого эфира для использования в iframe live-чата. Используя консоль разработчика, я определил, что следующий код работает для извлечения идентификатора видео, однако я возникла ошибка из-за попытки получить доступ к перекрестному источнику iframe.

Код: (Разработано с использованием кода из получить идентификатор видео YouTube из iframe video & получить элемент изнутри iframe )

var iframe = document.getElementById('live-video');
var livevid = iframe.contentWindow.document.querySelector("link[href^='https://www.youtube.com/watch?v=']").href,
    regExp = /.*(?:youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/,
    videoId = livevid.match(regExp);

if (videoId && videoId[1].length === 11) {
    console.log(videoId[1]);
}

Этот код возвращает правильный идентификатор видео и URL, если я использую инструменты разработчика для ручного редактирования содержимого в iFrame Youtube. Когда я не редактирую код вручную, это возвращение s следующая ошибка

Ошибка:

Uncaught DOMException: заблокирован фрейм с источником "MY_DOMAIN" от доступа к фрейму перекрестного происхождения.

Из моих исследований вы можете использовать document.postmessge, чтобы обойти ошибки перекрестного происхождения на Youtube, но я не знаю, как внедрить это в мой код или даже если это сработает для решения проблемы, с которой я сталкиваюсь.

Любая помощь, которую вы можете предложить, будет принята с благодарностью!

Answer 1

Понял после некоторой дальнейшей мысли, что природа iFrames будет блокировать любые попытки, которые я предпринял, чтобы получить доступ к их содержимому DOM; поэтому я работал с YouTube API, чтобы создать обходной путь:

/*Access Youtube iframe API*/
<script src="https://www.youtube.com/iframe_api"></script>

/*Insert Livestream Video*/
<iframe id="live-video" src="https://www.youtube.com/embed/live_stream?channel=[MY_CHANNEL_ID]&enablejsapi=1&version=3&origin=[MY_DOMAIN_HERE]" width="560" height="315" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen enablejsapi="1"></iframe>

/*Basic API code for Youtube videos*/
<script>
  var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('live-video', {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}
function onPlayerReady() {
  var url = player.getVideoUrl(); /*Use Youtube API to pull Video URL*/
  var match = url.match(/[?&]v=([^&]+)/); 
  var videoId = match[1]; /*Use regex to determine exact Video URL*/
/*Insert a new iFrame for the livestream chat after a specific div named chatframe*/
  var livevid = document.createElement("iframe");
  livevid.src = 'https://www.youtube.com/live_chat?v=' + videoId + '&embed_domain=[MY_DOMAIN_HERE]'
  livevid.width = '100%';
  livevid.height= '400px';
  document.getElementById("chatframe").appendChild(livevid);
}
    function onPlayerStateChange() {
    }
</script>