HTML video tag failure on some Apple devices

[oldcelt]

A small, 20 second video on my website is running into problems which are inconsistent across Apple devices.

This is what I've found:-
iPhone with iOS 13.6 - Runs as expected
iPad with iOS 9.3.6 - Runs as expected (iPad too old to be updated further)
iPad Mini with iOS 13.6 - Will not run with any browser; Safari; Opera; Chrome;
Mac with O/S 10.15.6 - Safari NO; Chrome YES Firefox YES
This is my code:-

<div class="embed-responsive embed-responsive-4by3">
                <video class="video-background" controls="true" controlsList="nodownload" playsinline>
                        <source src="videos/logoVid265.mp4" type="video/mp4">
                        <source src="videos/logoVid.webm" type='video/webm;codecs="vp8, vorbis"'>
                        Your browser does not support the video tag.
                </video>
</div>

I've searched every technical forum I can find and not been able to find a solution. The video works perfectly on any other O/S (Windows; Android; Amazon Fire; etc).

Most threads relating to similar problems are years out of date. I'd be extremely grateful if anyone can shine a light here. TIA.

 

[johnlawson875]

A small, 20 second video on my website is running into problems which are inconsistent across Apple devices.

This is what I've found:-
iPhone with iOS 13.6 - Runs as expected
iPad with iOS 9.3.6 - Runs as expected (iPad too old to be updated further)
iPad Mini with iOS 13.6 - Will not run with any browser; Safari; Opera; Chrome;
Mac with O/S 10.15.6 - Safari NO; Chrome YES Firefox YES
This is my code:-

<div class="embed-responsive embed-responsive-4by3">
                <video class="video-background" controls="true" controlsList="nodownload" playsinline>
                        <source src="videos/logoVid265.mp4" type="video/mp4">
                        <source src="videos/logoVid.webm" type='video/webm;codecs="vp8, vorbis"'>
                        Your browser does not support the video tag.
                </video>
</div>

I've searched every technical forum I can find and not been able to find a solution. The video works perfectly on any other O/S (Windows; Android; Amazon Fire; etc).

Most threads relating to similar problems are years out of date. I'd be extremely grateful if anyone can shine a light here. TIA.

You can create a faboulous website in wordpress in just minutes. Checkout this blog, it will greatly help you:

Guideline to Create (Ecommerce Site With WordPress) in 5 Min

Are you thinking of setting your online store up but you are most likely to feel worried and confused? Read this blog to create a quick ecommerce website.

www.golpik.com

 

[oldcelt]

I've been creating websites since before Wordpress was invented. I use Bootstrap framework these days which allows me to design and create without Wordpress limitations and complications. The problem here is with Apple and its inconsistency.

If you can show me a Wordpress snippet with a similar video of your own choice which shows no problem on any combination of Apple device/browsers I'll take my comments back and apologise.

PS: this is not an ecommerce website!