Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Scirroco

macrumors newbie
Original poster
Mar 23, 2013
24
4
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.
 

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

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.
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.