Play All - Multiple Video Players

[connorbennett]

Hi! I’ve made a grid which contains about ten short videos. I’ve created a short 4-6 sec video file for each and want the grid to play all of them at once, looping indefinitely. I originally tried to do this with gifs but the file sizes caused super long page load times, so I’ve opted for mp4 files hosted on JW Player. I’m pulling the files directly from JW Player via a direct link and playing them in a video player element.

I’ve set all the video player elements to auto play and loop but only one will run at a time. Clicking another player starts it running but pauses all of the others. Is it possible to have all video players on a page play at the same time?

Thanks!

[marc_a]

Hi @connorbennett,

Thanks for reaching out.

I replicate your setup on my staging environment and they are not all running at a time. This features will require customization. Regretfully, customization is outside the scope of our theme support. You may seek 3rd party developers to help you with your problems or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps.

Thank you.

[connorbennett]

Hi!

Thanks for the response. I’ve actually found a workaround using background videos in the containers. I now have a different question!

The page loads fine in a browser, but if you scale the page, the background video isn’t responsive. The fallback image applied in the same place is however. Is there anyway to make the background video of a container responsive?

Thanks!

[ruenel]

Hello @connorbennett,

Please make sure that you use a direct video file URL e.g. https://example.com/video.mp4 as your background video source. You should not use Youtube/Vimeo video links. The background video will cover the whole cell or column responsively.

If you need further assistance, kindly provide us the URL of the page where you have added the background videos so that we can inspect it.

Thanks.

[connorbennett]

Hi! Thanks for the reply!

I’m using a direct URL to the video file, which is hosted on JW player. I’ve done this in the past and background videos have scaled fine whilst resizing the browser window - not sure what I’ve done wrong this time! I’ve dropped a link below!

WORK - WE ARE MANIAC

Thanks,
Connor

[marc_a]

Hi Connor,

I just check your work page and when I resize the page using the Google Chrome dev tools your background video is just looking great on different sizes. Would you mind sharing a video or a screenshot indicating the issue you’re seeing on your end.

Hope that helps.

Thank you.

[connorbennett]

Hi Marc!

I’ve added a screen recording showing the issue: https://www.loom.com/share/b0b8ea2b4fe74b29a7d10a8c131dcc90

At the end, I also highlight a couple of videos that are super zoomed in and not holding their original scale.

[christian]

Hey Connor,

Like my colleague, the issue doesn’t happen on my end also. It looks like this happens on Safari only. Would you mind testing on other browsers? Also, please test 1 video on a page only.

Thanks.

[connorbennett]

Hey Christian!

I’m experiencing the same issue in Firefox, though it seems to sort itself out as the video loops over.

I’ve added a screen recording in the secure note.

Is there a better way of achieving this? I’m aiming for a grid of short videos that loop - it sounded simple in my head!

[ruenel]

Hello @connorbennett,

Please understand that the role of the theme is to display content. With your layout structure, how the browser renders those contents is way beyond the scope of the theme. You must also acknowledge that the browser uses much of the hardware accelerator, especially on this page loading all those videos all at once. Resizing the browser is not a normal way of how the user views the page. Doing it would be just for the sake of testing. And this is where it takes much hardware acceleration done by the browser. In some users with higher specs computers, those issues would barely or not even noticeable. This could be the reason when we test the page, we could not replicate the issue from our end.

Best Regards.