Two unrelated problems with animated_video_url: 403 Access Denied, and how to use variable in CSS

[hopelesssituationwar]

Hello again,

I have searched everywhere on the internet for a solution with no luck, this might be impossible.

Before I begin, this is in regard to the animated strip that is included in the JSON response to an unauth (just the regular client ID) request for top games using the v5 api.

There is a key : value pair with a url in the format that is still currently used on the main twitch.tv website, like this:

"animated_preview_url": "https://vod-storyboards.twitch.tv/34c290cc1490736b7d86_channel_27174598480_767082575/storyboards/217615140-strip-0.jpg"

Up until yesterday, I was able to see the picture strip being returned from the url, even though I was having trouble getting it to do what I wanted. I think I can handle the sprite animation now, after getting help from some kind souls here on the forum. (Thank you! )

Now, however, I’m getting 403 Access Denied responses, just for that image, on every single request. All the other data in the responses, from the same type of request, is accessible. Is anybody else having this problem?

The api requests I am using return the top 5 videos in a single JSON response, so I have to refer to the url by index.

I have tried using the same type of variable that I’m using - successfully - everywhere else in my HTML and assigning it to an attribute in several different ways. On MDN I found this:

<p data-foo="hello">world</p>

p::before {
  content: attr(data-foo) " ";
}

which seems like it should work with assigning variables where they have “hello”, but it’s not working. The variable was returning an image strip (just putting image tags around it) but now I can’t get it to return anything, is it just me?

<ul url=' + videos[0].videos[0].animated_preview_url + '>
ul:hover {
  content: attr(url) no-repeat;
  animation-name: animate;
	animation-duration: 5s;
	animation-timing-function: steps(9); 
	animation-iteration-count: infinite;
}

Any other ideas? I tried several variations of this, including using a regular image that is not currently having 403 errors, without the animation of course.

How else can this be done? I can’t imagine somebody goes in there every day and hard-codes that url in there every time something changes?

Here’s a codepen I just now made, it really messed up my styles but they weren’t all that great to begin with, so whatever! LOL