Happily that's not necessarily a problem. Presumably there are video formats or sizes that will work on iPhones, and the switching technique will work equally with them. Don't throw that new phone away yet.

Frank

Hi Frank

Thank you for the RSD sample, I exported your file and uploaded it to the following URL:

https://bve.webpreviews.co.za/

Sadly, your suggestion will not work, switching the display between BLOCK and NONE still loads the files, now you will end up loading TWO video files making matters even worse.

The fact that ALL files still load even if you set the display to NONE is exactly my problem that I mentioned in my first post.

Sorry. I assumed that the load-time matter had been accepted if one were using a single page, and that the remaining problem was only the ability to have an alternate video for the iPhone to play.

To cure both problems in a single page is no doubt possible with clever programming, but seems unnecessary. The fact that we can make responsive web pages doesn't prevent us from simply having an alternate page for some devices. The opening page could simply do nothing except determine which device in use and immediately direct automatically to one of two alternate pages, one for narrow viewports and the other for wider ones.

Frank

I have video components in my 'component shop' (See 2nd URL in my signature). The ones for Bootstrap and Foundation are background videos. If you look at their pages (e.g. https://mock-up.coffeecup.com/f-comps/f-videos.html), you will see that they have been made to start running the video from a specific breakpoint.

There is also an explanation about how to make the video play for all screen widths by removing the container '.overlay'. I have now uploaded a wee example of the Foundation variant, where I have removed said container, and the video plays fine on my iPhone. See https://barbu.coffeecup.com/index.html .

The video has been linked from Vimeo, and I guess they have all the necessary codecs and video file formats handy.

The two main problems raised in this thread seem as follows -
1. One of Chris's clients wanted a background video to play on mobile devices, but SD's Background Video Element didn't seem to work with all mobiles (especially iPhones).
2. For other clients Chris wanted background videos not only not to show on mobile devices, but also not to load to mobile devices, because of the loading delay with large video files. Using display:none prevents mobile devices from displaying the videos, but https://pagespeed.web.dev/ showed that the mobile devices still loaded the videos.

For item 1 above, Inger's Component shop now has a Materialize component ( https://mock-up.coffeecup.com/ma-comps/ma-bgvideo.html ) showing a solution using SD's Background Video Element by adding a custom attribute in the Element panel.

Regarding item 2, a page switching solution could be used, but needs a way of detecting mobile devices. Such detection by pixel screen widths is not good because some mobile devices have fairly high resolution screens. Of the many supposed solutions online, the first one at https://www.geeksforgeeks.org/javascrip … e-browser/ seems to work OK. Although 'userAgent' is deprecated and is said to be unreliable, most of the non-viewport answers online seem based on it.

Frank