“catching” errors in embedded youtube videos

user_569976 0
Viewed 793

I'm embedding a YouTube video in my website as follows:

<iframe src="https://www.youtube.com/embed/C_JiP-j2FwM?autoplay=1&loop=1" frameborder="0" allowfullscreen width="100%" height="100%"></iframe>

It works great but on my work computer, when I'm logged into Google Chrome with my work email, I get the following error:

An error occurred. Please try again later. (Playback ID: TMjivVwHlyxtQxnL) Learn More

This is expected. It's because my work email doesn't have permission to access YouTube. Here's the error I'm getting when I try to access it with my work email:

According to the DOM Inspector / Network tab requests to https://www.youtube.com/youtubei/v1/player?key=C_JiP-j2FwM are giving this error back:

{
  "error": {
    "code": 403,
    "message": "The caller does not have permission",
    "errors": [
      {
        "message": "The caller does not have permission",
        "domain": "global",
        "reason": "forbidden"
      }
    ],
    "status": "PERMISSION_DENIED"
  }
}

The code works because I can play the embedded video back in Incognito back just fine (because I'm not logged into my work email when I'm in Incognito).

Here's the code in it's full glory so people can reproduce the "problem" and see that it, in all likelihood, works great for them: https://jsfiddle.net/p3jz62uL/

What I'd like to be able to do is "catch" the error and change the behavior if it would occur. Maybe I'd remove the video all together or maybe I'd replace it with an image idk.

youtube-api youtube javascript
1 Answers

You can try making use of the youtube iframe api to detect this issue and respond accordingly. See the error codes available https://developers.google.com/youtube/iframe_api_reference#onError To get you started,

<iframe id="yt-video-iframe" width="630" height="354" src="https://www.youtube.com/embed/C_JiP-j2FwM?autoplay=1&loop=1&enablejsapi=1" frameborder="0" allowfullscreen=""></iframe> <!-- note the &enablejsapi=1 --> 


<script type="text/javascript">
  var tag = document.createElement('script');
  tag.src = 'https://www.youtube.com/iframe_api';
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var player;
    // this function will be called automatically !
    function onYouTubeIframeAPIReady() {
            console.log("this func is automatically called");
        player = new YT.Player('yt-video-iframe', {
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange,
                'onError': onPlayerError,
            }
        });
    }
    
    function onPlayerReady(event) {
        console.log('video is ready');
    }

    function onPlayerStateChange(event) {
        console.log(event.data);
    }
    function onPlayerError(event) {
        console.log(event.data);
    }    
</script>

I cant include it as snippet here since its sandboxed, but you can check the jsfiddle https://jsfiddle.net/puejzy6o/1/ example

Take note that your iframe url needs the query parameter &enablejsapi=1 and that onYouTubeIframeAPIReady is called automatically

Note: I didn't actually try to test if your particular error is handled by the api, but it should be.

user_96802990
Related