I have a bit of a problem I can’t figure out. I already scouted the forums for a solution without success. I made a neat little preloader for my clients’ website but the video is not showing up on my mobile device. The video is an embedded video I’m hosting myself. Here’s the code from the code embed:
<video id="preloader-vid" autoplay loop muted height="100%" width="100%"> <source src="https://fastdl.aimless.eu/assets/FV-load.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
I also have some custom code before the site’s
<script> var vid = document.getElementById("preloader-vid"); vid.playbackRate = 1.5; </script> <!-- START: Mobile Autoplay Video --> <script> var mobilevideo = document.getElementsById("bg-vid", "preloader-vid"); mobilevideo.setAttribute("playsinline", ""); mobilevideo.setAttribute("muted", ""); </script> <!-- END: Mobile Autoplay Video -->
When I open the website on my chrome and open DevTools to set the screen size to that one of a mobile device the video still shows and plays. When I open the site on my phone the video is not visible/not playing. I also am not sure if my background video actually plays on iOS devices. I don’t yet have an emulator to check myself. As a precaution, I added the custom code shown above which should make the video play on iOS devices.
I hope someone can help me out with these two problems.