JS code to pull Youtube Livestream Video ID

Question

I'm looking to create a webpage that features my channel's livestream, but also displays the livestream chat. Using an iframe code src targetting the channels livestream I was able to get the site to display whatever video is being livestreamed at that moment:

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

However using Youtube Chat iFrame code, I can only target a specific video's chat.

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

As such, I am trying to use JS code to pull the livestream video ID from the livestream iFrame for use in the live-chat iframe. Using the developers console, I have determined that the following code works to pull the Video ID, however I have run into an error due to trying to access a cross-origin iframe.

Code: (Developed using code from get youtube video id from iframe video & get element from within an 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]);
}

This code returns the correct video ID & URL if I use developer tools to manually edit the contained within Youtube's iFrame. When I do not manually edit the code, it returns the following error

Error:

Uncaught DOMException: Blocked a frame with origin "MY_DOMAIN" from accessing a cross-origin frame.

From my research, you can use document.postmessge to bypass cross-origin errors on Youtube, but I am at a loss on how to implement that into my code, or if it would even work to resolve the issue I am facing.

Any help you can offer would be greatly appreciated!

Detraction

Answer 1

Realized after some further thought that the nature of iFrames would block any attempts I made to access their DOM content; so I worked with the Youtube API to create a workaround:

/*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>

Detraction

I am surprised this work for you... It works when the videoID is given but not when the channelId is given. For some reason the YT API is unable to create a player instance when the channel Id is specified. I'm guessing as enablejsapi=1 breaks the livestream link. – Curable

If you enter your channel ID into the <iframe src=""> link, it should work. You are correct in that the second script will only work from the videoID, however if you are successful in putting your channels livestream on your site (using the iframe code) it will work. Enablejsapi just allows the player to be controlled via the Iframe Player API. I believe it needs to be on in order to pull the video ID & hash out the chat code, but I haven't tested that. – Detraction