Stream thumbnail as an <img>

I’m trying to set up some browseable lists of videos and I figured I’ll just use the Cloudflare generated thumbnails.

I’m able to retrieve the thumbnails when referenced by the <stream ... poster="..."> attribute (as per the docs), but I don’t want to grab the stream just yet as that’s proving inefficient. I just want the thumbnail image.

When I put the same URL into an <img> tag however, it fails to retrieve the thumbnail. I’ve tried supplying the original video ID, as well as the signed URL version of the link. For example:

<img src="{video ID}/thumbnails/thumbnail.jpg">
<img src="{signed URL}/thumbnails/thumbnail.jpg">

Both of these fail to load any thumbnail. Is this possible? Am I going about it the wrong way?

It’s returning a 401 error when trying to load images this way.
I’ve tried switching off “Require Signed URLs” and allowing all origin domains for my test video/thumbnail, but I’m met with the same result.

Hi @Bink
sorry for the issues that you have,

a 401 error in general happening when a request was not sent with the proper authentication credentials

I am not confident that this is the cause of the issue in your case (authentication) but make sure to start from there.

Do you have a link so we can check that a bit more, and in case that this is happening on our side I can check that with the Stream team for more details.

1 Like

Thanks for your help @stefano1.

With your direction, I’ve tested this a little more. Today I’m having success with it. I’m not sure if I was making an error the other day or something has changed.

In case it’s helpful to others, my working code looks like this:

echo '<img src="'. $signedURL  .'/thumbnails/thumbnail.jpg?time=15s">';
1 Like

@Bink It takes up to a few minutes for the “Require Signed URLs” option to take effect. Could it be that you tried it too soon?

If you uncheck “Require Signed URLs” option and wait a few moments, the non-signed URL should also work