I have the video background plugin for site origin page builder (Wordpress) and I have uploaded a background video (MP4 and WEBM formats). The file sizes are around 35mb and 17mb respectively.
I have tested on a couple of iPhones running up to date iOS with safari and the video is not autoplaying as it should (only showing fallback image).
Video Code:
<video id="so_bgvideo_5df3a8b601042"
class="so_video_bg jquery-background-video is-playing is-visible"
loop="" autoplay="" playsinline="" muted="" data-bgvideo=""
poster="https://mywebsite.com/fallback-image.jpg"
data-bgvideo-fade-in="500" data-bgvideo-pause-after="120"
data-bgvideo-show-pause-play="true"
data-bgvideo-pause-play-x-pos="right"
data-bgvideo-pause-play-y-pos="top"
style="min-width: auto; min-height:auto; width: 100%; height: auto;
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
transition-duration: 500ms;">
<source src="https://mywebsite.com/video.mp4" type="video/mp4">
<source src="https://mywebsite.com/video.webm" type="video/webm">
</video>
As far as I can tell the video contains the attributes required via Safari (and it plays fine on Safari desktop).
Can anyone please advise a fix to get it working on Safari mobile?
UPDATE
As stated in initial post I was using a video background for site origins plugin for Wordpress.
Although the plugin hadn't been updated in recent times, an update was available on GitHub here: https://github.com/BGStock/jquery-background-video/blob/master/jquery.background-video.js
Adding this new file/overwriting the old one resolved the issue on iOS. Hope this helps anyone else using this particular plugin.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments