Fixing Poster Image Stuttering on Looping Videos

April 11, 2014

A couple of days ago I was building an html5 video element that would autoplay and loop once it loaded. The idea is that it would look kind of like those looping gifs that you see all over the internet, but it's video!

‍

WOW! The problem was that the poster image would show up at the end of every loop and give the element a jarring stutter effect.

Rudy, sensing a disturbance in the room's chi, swiftly came to my aid and wrote this script.

$(".video-element").on("play", function(){
$(this).attr("poster","");
});

Thanks dude!

This replaces the poster attribute with nothing once your video element starts playing and stops the stutter. It worked for me, hopefully it will work for you too! Good luck!

You Might also like...

Native Form Handling in React 19

Curious whether React 19’s new form features can replace React Hook Form? This article breaks down the pros, cons, and best use cases for each—helping you choose the right tool for your next React project.

Managing Persistent Browser Data with useSyncExternalStore

Struggling to keep React state in sync across tabs and sessions? Learn how to use useSyncExternalStore to manage state persistence with localStorage and sessionStorage—without complex state management libraries. Improve performance and streamline your app’s state logic.

React Hooks 102: When to Avoid useEffect

Overusing useEffect in React can lead to inefficient components and performance issues. In this post, learn when to avoid useEffect and discover better alternatives for managing state, calculations, and user events. Optimize your React code with best practices for cleaner, faster applications.

Fixing Poster Image Stuttering on Looping Videos

You Might also like...

Ready for your new product adventure?

Let’s Talk

Company

Fixing Poster Image Stuttering on Looping Videos

You Might also like...

Ready for your new product adventure?

Let’s Talk

Company

Join 10K+ people getting helpful guides, exciting case studies and much more in our newsletter.

Connect with Yeti