It
does load the video, but only after the visitor initiates the playback. However, as you have observed, it does not preload the meta data (first few frames or all of the video), like desktop browsers. Unfortunately, this is how it works in most mobile browsers. The related attribute
preload="metadata" is just a "hint" to browsers, and mobile browsers seem to ignore it, likely because they want to avoid downloads not triggered by users. This is confirmed in this link:
https://www.stevesouders.com/blog/2013/ ... o-preload/
stevesouders wrote:Observation #1: Mobile devices don’t preload anything. The VIDEO spec calls the preload values “hints”, so it makes sense that mobile browsers would choose not to preload anything in order to save on data costs. Instead, the video doesn’t start downloading until the user initiates playback. When I saw this I decided to add a test for the AUTOPLAY attribute. As shown, that also does not cause any video download on mobile devices
This is basically related to the same issue as to why mobile browsers cannot "autoplay" video either.
https://www.aerserv.com/why-does-video- ... -not-work/
Solution
A good solution would perhaps to set the video
POSTER attribute? The poster attribute allows loading an image as placeholder for a video (before the video loads), and should work fine on mobile. This would make it look nice on mobile at least, before the visitor triggers play.
<video poster="{{path}}__poster.jpg" style="margin-top:2em;" width=50% controls preload="metadata" class="x3-style-frame">
<source src="{{path}}InsightSpirit_-_Fireworks_variations.mp4" type="video/mp4">
</video>