yeti logo icon
Close Icon
contact us
Yeti postage stamp
We'll reply within 24 hours.
Thank you! Your message has been received!
A yeti hand giving a thumb's up
Oops! Something went wrong while submitting the form.

Fixing Poster Image Stuttering on Looping Videos

By
-
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...

VIDEO: Building API's with Django and GraphQL

At our last Django Meetup Group event, Jayden Windle, the lead engineer at Jetpack, an on demand delivery company, talks building APIs with Django and GraphQL. Watch the video to learn more.

Using Pytest to Write Beautiful Tests and a Bulletproof Django App

At the last meeting of the San Francisco Django Meetup Group, Wes Kendall gave a talk on how to make a bulletproof Django application by testing it with pytest. Check out his talk here!

Creating a Reusable Component Library: Yeti Lunch and Learn

Part of the Yeti Lunch and Learn series - our amazing developer, Resdan, gives a presentation on creating a reusable component library. Enjoy the video!

Browse all Blog Articles

Ready for your new product adventure?

Let's Get Started