Trouble with thumbnails

I’m rather new to CF and not a developer, so I’m hoping for some assistance on thumbnails.

CF’s Streaming documentation is helpful on thumbnails, but I think there’s an error in their description of setting them to a different time code than the default (first frame). The instructions have different snippets of code in the examples. One uses the forward slash “thumbnails/thumbnail.jpg?time=6s&height-270” while the other one showing the code in use replaces the forward slash with “%2F” and other variations. Here’s the link. [https://developers.cloudflare.com/stream/viewing-videos/displaying-thumbnails ]

Compare the code above and below the thumbnail image.

I applied the code above the thumbnail using forward slashes, but it isn’t working. No thumbnail appears. Two questions:

  1. am I using the right code (with the time code I want from my video’s timeline) and 2) Does it take time for the thumbnail to process?
    I’ve attached a screenshot of my player code after following the CF instructions.CF_thumbnail_Code

Hey @phlebotomy! / and %2F are interchangeable characters when writing a URL. This is called percent encoding and you can read about it more here: Percent-encoding - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

When writing URLs for thumbnails you can use either and it will work!

Thank you. Did you notice anything in the code that I posted an image of that would explain why the thumbnails aren’t showing? Or does it take awhile for CF to process the thumbnail?

The URL after poster in the code you posted needs to start with videodelivery.net instead of iframe.videodelivery.net. There is no processing time for images, it should be instant.

Example link: https://videodelivery.net/f899ead2e625482c9970e3f99d8cec0e/thumbnails/thumbnail.jpg

Thank you. I tweaked it as you said and changed it to a responsive player to no avail. Still no thumbnail. I would be most grateful if you could check this code for errors that might explain the absence of a thumbnail.

Check out this one: I moved the quote over from before poster to after the end of the URL

<div style="position: relative; padding-top: 56.25%;"><iframe src="https://iframe.videodelivery.net/caffbd4c614c01274d8ae4b377eb838f?poster=https://videodelivery.net/caffbd4c614c01274d8ae4b377eb838f/thumbnails/thumbnail.jpg?time=11s" style="border: none; position: absolute; top: 0; height: 100%; width: 100%;" allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;" allowfullscreen="true"></iframe></div>

Thanks. I moved the quotation mark where you did and now the player no longer appears at all. Just this text where the player used to be:

poster value should be a valid encoded URL. For example in Javascript, encodeURIComponent() function can be used.

1 Like

I solved the problem with your help from another post. Thank you!

1 Like