How to detect when the YouTube doesn't load?

Admin 1
Viewed 151

I have a web-page that allows the user to enter YouTube video URLs and display them in thumbnail previewers which do not auto-play them. When the user enters the URLs:

  1. some may be valid and load,

  2. some are not valid and don't load,

  3. some, while valid URLs aren't embeds with URLs similar to

    https://www.youtube.com/watch?v=NCZaq9pSBxQ and don't load, and

  4. finally, while very rare, are valid, aren't embeds, but still load.

So, I don't want to prevent the user from entering any of these YouTube URLs, embed or not. Instead, I want to detect when the YouTube video doesn't load.

Here is some of the HTML 'code' that I'm using that shows one YouTube that doesn't load and one that does:

function update_ytplayer2( This ) {
 
 // validate the textarea's value -- omitted

  document.getElementById( 'ytplayer_2' ).src = This.value.trim();
}
.webvideourlPreview {
    height: auto;
    width: 75px;
    max-height: 110px;
    margin-right: 3px;
}
textarea {
    width: 400px;
}
<iframe id="ytplayer_0" class="webvideourlPreview" scrolling="no" 
    src="https://www.youtube.com/watch?v=NCZaq9pSBxQ"
    source="https://www.youtube.com/watch?v=NCZaq9pSBxQ"
    video="true" youtube="true" style="display: block;"></iframe>

⁝<br />

<textarea onblur="update_ytplayer2( this );">https://www.youtube.com/embed/0376xWdwBBs</textarea><br />

⁝

<iframe id="ytplayer_2" class="webvideourlPreview" scrolling="no"
    src="https://www.youtube.com/embed/0376xWdwBBs"
    source="https://www.youtube.com/embed/0376xWdwBBs"
    video="true" youtube="true" embed="true"
    style="display: block;"></iframe>

Here is a codepen that shows the second iframe like it does in my web-page. which uses the same code and css styles as used above.

Here is what I see in the Chrome Browser's Inspect Element panel:

⁝
 <!-- Non-Working YouTube Video -->
▼<iframe id="ytplayer_0" class="webvideourlPreview" scrolling="no"
         src="https://www.youtube.com/watch?v=NCZaq9pSBxQ"
         source="https://www.youtube.com/watch?v=NCZaq9pSBxQ"
         video="true" youtube="true" style="">
 </iframe>
⁝
 <!-- Working YouTube Video -->
▼<iframe id="ytplayer_2" class="webvideourlPreview" scrolling="no"
          src="https://www.youtube.com/embed/0376xWdwBBs"
          source="https://www.youtube.com/embed/0376xWdwBBs"
         video="true" youtube="true" embed="true" style="display: block;">
    #document
    <!DOCUMENT html>
   ▶<html lang="en" dir="ltr" data-cast-api-enabled="true"
          wtx-context="AE89359A-CCF4-46DF-933F-36746B4B5815">
    </html>
  </iframe>
⁝

Both of the iframe tags are open, but I noticed that the non-working YouTube doesn't show anything between the open and close iframe tags, but the working YouTube does.

Is there some way that I can detect this in javaScript?

I saw that there was a .contentDocument property, but in Chrome this is always null, and there is a .contentWindow property, but both the non-working and working YouTube videos pretty much appear to show the same object/structure and so far I haven't found anything in the object that I can use to programmatically determine which video isn't working and which is.

I understand that there are two events that can be used, error and load, according to the information that I've found on these event because I'm not loading a file into the iframe, the events don't 'fire' whether the YouTube video loads or not.

I also saw somewhere in StackOverflow that the native size properties contain size of the small sad-face graphic, but I don't see how to get that information, especially since the .contentWindow doesn't appear, as far as I can tell, to these properties when I inspect these elements. However, I'd rather not rely only on the size of the image alone to determine the failure of the load.

Thanks

youtube iframe loading html
1 Answers

Actually YouTube doesn't allow 3rd parties to embed their site directly. That is why using links like https://www.youtube.com/watch?v=NCZaq9pSBxQ or https://youtu.be/NCZaq9pSBxQ will raise Refused to display 'https://www.youtube.com/watch?v=NCZaq9pSBxQ' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'. warning in your console.

Fortunately Youtube offers "embed video" option, to allow us to embed videos. Using this feature I had written my code. Check out this snippet:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <style type="text/css">
        .webvideourlPreview {
            height: auto;
            width: 75px;
            max-height: 110px;
            margin-right: 3px;
        }
        textarea {
            width: 400px;
        }
    </style>
    <script type="text/javascript">
        function update_ytplayer2( This ) {
            //capture trimmed value
            let val = This.value.trim();
            let embed_src;
            if(val.includes('watch?v='))
                embed_src = This.value.replace("watch?v=", "embed/");
            else if(val.includes('youtu.be'))
                embed_src = 'https://www.youtube.com/embed/'
                            + val.split('/').pop();

            // validate the textarea's value -- omitted
            document.getElementById( 'ytplayer_2' ).src = embed_src;
        }
    </script>
  </head>
  <body on>
    <iframe id="ytplayer_0" class="webvideourlPreview" scrolling="no" 
    src="https://www.youtube.com/watch?v=NCZaq9pSBxQ"
    source="https://www.youtube.com/watch?v=NCZaq9pSBxQ"
    video="true" youtube="true" style="display: block;"></iframe>

    ⁝<br />

    <textarea onblur="update_ytplayer2( this );">https://www.youtube.com/watch?v=NCZaq9pSBxQ</textarea><br />

    ⁝

    <iframe id="ytplayer_2" class="webvideourlPreview"
    style="display: block;"></iframe>
  </body>
  </html>

In the snippet, inside function update_ytplayer2 we using val variable to save trimmed value of our <textarea>. Next depending on the type of link, we may or may not altering it to get link in the form of https://www.youtube.com/embed/[unique_identifier] and save it into another variable embed_src.Finally, setting embed_src as our <iframe> source.

Function update_ytplayer2 called each time user generate blur effect on <textarea> by moving focus away from it which in turn updates the video shown in <iframe id="ytplayer_2">.

Note: I had removed the HTML5 non-standard attributes from the <iframe id="ytplayer_2">.

user_138281240
Related