CODEWITHSUNDEEP
javascripthtmliframeyoutubeyoutube-livestreaming-api
Darien Chaffart
Darien Chaffart

Reputation: 21

JS code to pull Youtube Livestream Video ID

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!

Upvotes: 1

Views: 1966

Answers (1)

Darien Chaffart
Darien Chaffart

Reputation: 21

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>

Upvotes: 1

Related Questions