Multiple video elements in view and set to auto play but only one plays at a time

Support
#1

I am building a product page where I have short 3-4 second videos I am using instead of images to display product features. This is because I can get much smaller file sizes with videos than using an animated WebP for example, and from what I read online devices should handle video better (hardware decoding and that).

multiple videos
multiple videos2732×1069 469 KB

The problem I am having is that only one video will play at a time, I want all of them to be playing in a loop whenever they are visible. What video plays when you load the page seems to be random, and if you click on any other video it plays and the first one stops. The way I have this set up with no controls, autoplay and loop a user wouldn’t even know that they are videos, and thats the point I want them to simply be like animations.

So what can I do to make it so that all videos on a page that are set to autoplay will play at the same time? I get that the default behavior makes sense when using a video in a standard way, you wouldn’t want sound from multiple videos playing at the same time. But in my case I’m using videos like animated images, they have no sound and are not going to be a load on the page at a couple hundred kb each.

#2

Hello Jeffrey,

Thanks for posting in!

The behavior you’re describing (only one playing at a time, random initial play, clicking stops others) is actually a combination of browser autoplay policies and the default click-to-toggle behavior of the <video> element.

Why is this happening?

  • Random play: When you use autoplay on multiple videos, browsers don’t queue them all up simultaneously. They often pick whichever video loads its metadata first and autoplays that one, while ignoring the others until they have a user interaction.

  • Clicking stops others: By default, clicking on a <video> element toggles its play() / pause() state. But crucially, if a user clicks a second video, the browser’s internal media session sometimes assumes you want to switch audio/video focus, which can inadvertently pause the first one.

Try this “Passive Animation”:
If you truly want users to not even know these are videos, you should remove all interactivity from them entirely. Just add this single line of CSS:

/* This makes the video completely passive - no clicking, no pausing, no toggling */
.product-video {
    pointer-events: none;
}

Add that class to your videos, and clicking them will do absolutely nothing. They will simply sit there and loop.

Kindly provide the URL of the page where we can find these videos.

Best Regards.