Check with JS if YouTube thumbnail was loaded

Question

we set-up visual regression testing for our website (with BBC Wraith). Everything works well if the page has no youtube video embedded. If a page has one embedded it sometimes occurs that WRAITH takes a screenshot of the page before the YouTube Thumbnails was loaded. Of course, we could just extend the timeout for Wraith to wait a little longer for those pages in order to increase the chances the thumbnail is there already - but there might be a better solution.

Therefore we would like to understand if there is a way to find out, if the YouTube thumbnail was loaded.

Due to Same-origin policy we can't access the YouTube iframe with JS.

Update: I tried to use the YouTube iFrame API (https://developers.google.com/youtube/iframe_api_reference?hl=en#Events) and worked with onReady-Event. It is triggered when the player is ready to receive API-calls but this does not seem to require the thumbnail to be loaded.

Are there any other ideas? (e.g. check if the browser loaded a specific ressource from youtube etc.)

Thanks.

score 0 · Answer 1 · answered Feb 21 '19 at 14:18

If I understand you correctly, you need to know when the YouTube thumbnail was loaded.

If so, you can use the following code - which has adapted from:

Answer to: JavaScript: Know when an image is fully loaded

$().ready(function() {

  $('img#youTubeVideoThumbnail').attr('src', 'https://i.ytimg.com/vi/wtKIVArS17w/hqdefault.jpg')
    .load(function() {
      alert('Image Loaded');
    })
    .error(function() {
      alert('Error Loading Image');
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<img id="youTubeVideoThumbnail" />

In the previous code, is detected when the thumbnail was loaded, and then, shows an javascript alert.

The used thumbnail comes from this video - Soweto.

You can replace the alert() with the code you need to execute once the image was loaded.

Check with JS if YouTube thumbnail was loaded

1 Answers1