Video links in list - looping / not looping


I am building a sign language dictionary to share with my daughter’s nursery and our relatives listing the version of each BSL sign we are using and whether she understands or uses them. Each sign is linked to a video from Sign BSL dot com (only 2 links allowed).

The challenge I have is the way videos are displayed in the list block. I have used the Video URL content type in the list and this loads all the videos and starts playing them as the page loads. This creates problems as it’s a lot of data to load and will only be more so as the dictionary grows. You can see how this works here

To combat this I’ve changed the build so the video is displayed in a modal on click of the list block. The problem with this is that each video is only a few seconds long, so doesn’t play long enough for the pause/play overlay to disappear when viewing on mobile (iOS, rather than Softr’s mobile preview, which behaves differently). You can see this here by clicking on ‘Aeroplane’ or ‘Apple’ on iOS

When loading the videos directly in the list block they loop, so they play for enough time for the pause/play overlay to disappear, but in the modal they don’t. Is there any way to control this behaviour or any other smart ideas to display the video in an easy to use, mobile friendly manner? SignBSL provide their own embed code but it creates a preview and doesn’t play on mobile when clicked.

Thanks in advance,