Hovering over a video runs through a brief preview of the workout.

Video Preview Before

This was done through running an interval every 500ms, switching out the background image to the next in the series. As all the images were separate files, you’d get the occasional janky white flash occurring while the browser waits for the next image to load.

The obvious solution? Only loading a single image. If we combine all the thumbnails into a montage, set that as the background image then move it around, so only the current thumbnail is visible, we get the same result.

Video Preview After

The initial flash while the montage image loads is still there, but the overall result is so much smoother.

There’s a weird bug with the mouseover/out that trigger the preview when moving through multiple videos – mass attaching events via data attributes probably isn’t the best for this kind of usage.