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.

#3

Thanks for the info, it looks like its simply not possible to get the videos to all auto-play at the same time. I looked up more on the topic online after you pointed me to what it might be and some suggested that using the mute option would allow multiple videos to load at the same time. Unfortunately it doesn’t seem to work in my tests.

The CSS code you sent does remove all interactivity from them, which would be great if they would simply all play at the same time. But since only one will ever play at once it makes it impossible for you to even play the other videos.

My attempt for now was to hide all the controls on the videos except the play/pause button and hope that users will notice that they are videos and can click to cause them to play. I was finally able to get the page from my local staging site up onto a site online so that you can take a look at it here.

I would love it if there was an alternate control option for the video player that would let me place a simple play button in a circle over the center of the video when its not playing. As this is a design pattern that is pretty common on the web, kind of like what embedded you-tube videos do people would understand it is a video and to click on it to play. It would be nice to control the size and color of the play icon, size and color of the circle, and its position on the image. Is there any chance this could be added as a feature to the video element in self hosted mode.

#4

Hey Jeffrey,

Your setup right now is perfect. The play button is obvious and only 1 video playing at first is just right as compared to all videos playing which will make the page busy.

Anyway, muted videos should play as browsers allow muted videos to play simultaneously. Ensure that:

  1. Check the box for Muted .
  2. Keep Autoplay , Loop , and Plays Inline checked as you currently have them.

If that doesn’t work, regretfully, it’s possible the browser’s policy about autoplay videos changed and custom development would be required to achieve what you need. For that, you can subscribe to our One service.

Thanks.

#5

@ guategeek, I ran into this same problem and was able to resolve it with this:

  • Add a Div element

  • Size the Div element accordingly, I used a combination of Aspect Ratio (set to the video’s aspect ratio) and Max-Width

  • Inside the Div, place a Raw Element object

  • Use a standard HTML <video> tag with the following attributes: autoplay muted loop playsinline

  • Add the following CSS to your page video { display: block; width: 100%; height: 100%; object-fit: cover; }

#6

Thanks for sharing this information, @stilemas

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.