Animated preview - how do I do this? Update: Variables in CSS?

API
5

Well, the solutions and suggestions provided earlier will work, if I hard-code the url from the JSON response into the CSS.

I have tried using the same variable that I’m using 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?