iOS devices not playing HTML embedded videos from my website

[Scirroco]

Good afternoon.
I am building a web site and want to make it iOS compatible. And I want to embed a short mp4 video in one page. I have constructed the page and the video plays perfectly when viewing the page in any of my desktop Macs (MacBook Pro Intel, Sequoia 15.3 beta, MacMini M1, MacMini 2015 (using Safari, Safari Preview, DuckDuckGo, Vivaldi). When viewing the page on either my iPhone (12, iOS 18) or iPad (9th Gen, iOS 18.3), no video at all - just a blank area within the page where the video should be.
The code at the moment is:

<div class="banner-bg" id="top">
<div class="banner-overlay"></div>
<div class="welcome-text">
<video width="640" height="360" loop autoplay controls playsinline >
<source src="apple.mp4" type="video/mp4" />
</video>
.
.
</div>
</div>

There have been many similar problems described on the internet and I have tried solving things by following their suggestions, including trying with an audio-less video file, turning on/off controls, playsinline included or not etc. Nothing works! For reasons, I really don’t want to have to upload the video to YouTube and embed a link from that.
Anybody offering a solution/suggestion would be appreciated. Thank you.

 

[MacCheetah3]

Delivering Video Content for Safari | Apple Developer Documentation

Improve the performance and appearance of video in your website in Safari.

developer.apple.com

Audio and Video HTML

Explains how to use the HTML 5 audio and video tags to add media to web content.

developer.apple.com

I’ve given up following the Web development realm. It feels like a smashed onion, endless layers and library variants. Just one example:

Note for anyone using React: you'll need to use playsInline, in camelCase.

– Ethan Ryan

HTML5 Video tag not working in Safari , iPhone and iPad

I am trying to create an html5 web page in which there is a small video like 13s , I converted the flash version of this video into 3 format : .ogv using fireFogg , .webm using firefogg also and .mp4

stackoverflow.com

I miss the days of simple HTML. I was also okay with a little, ‘vanilla' CSS and javascript for a dynamic experience. But now… Ugh! Anyway… Hopefully, the above documentation helps.