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 </body> tag:
<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")[0];
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.
I found the solution to my problem (video had a format that couldn’t be decoded).
Also found a fix for the problem with video’s not autoplaying on iOS.
If you have one singular video you want to autoplay you can use this code and place it before your </body> tag:
var video = document.getElementsById("videoID");
video.setAttribute("playsinline", "");
video.setAttribute("muted", "");
video.play();
make sure you set an id in your <video> tag like this:
<video id="videoID" autoplay loop muted>
<source src="video.mp4">
Your browser does not support the video tag.
</video>
If you have more then one video on your page (like me. I had a preloader vid and a background video) you want to use this code and place it before your </body> tag:
<script>
for (video of document.getElementsByTagName("video")) {
video.setAttribute("playsinline", "");
video.setAttribute("muted", "");
video.play();
}
</script>
this script will itterate all the <video> tags on your page and give them the set properties.
I am running into the same issue and I cannot seem to get it for the life of me. Are you inserting the code in the Footer via the editor? What does the code for your page with multiple videos look like? Where do you set the video ID tag?
I am dumb Didn’t know what you meant by “Before <‘/body’> tag”. I found the section and pasted the code you have on your read only site and it works!! Thank you man.
<script>
var vid = document.getElementById("preloader-vid");
vid.playbackRate = 1.5;
</script>
<!-- START: Mobile Autoplay Video -->
<script>
for (video of document.getElementsByTagName("video")) {
video.setAttribute("playsinline", "");
video.setAttribute("muted", "");
video.play();
}
</script>
<!-- END: Mobile Autoplay Video -->
Hello! Have you tested this lately since the recent updates? It seems this is no longer working for us. :-/
If you find a solution again, please let us know!
Just wanted to say thanks for posting this. Fixed a problem I’ve been having with autoplay not working for a while. For everyone else, this is the code I used based on what Klaver posted above:
<script>
// Code to capture all videos on the page
const videos = document.querySelectorAll(" .YOUR_CLASS_wrapper .YOUR_CLASS");
//Code to force autoplay on all devices
for (const video of videos) {
video.setAttribute("playsinline", "");
video.setAttribute("muted", "");
video.play();
}
</script>
If you’re still having trouble with the video appearing after that:
Make sure your hosted video file link ends with .mp4 (or whatever file extension it is – and if it is different make sure that the type=“video/mp4” reflects that).
Make sure that the video file size is small enough (this is often the issue)
Hi @JackHeathcote , could you please explain where would the video goes if I have multiple videos on a page? lets say 2 videos in 2 different sections.
Didn’t know what you meant by “Before <‘/body’> tag”. I found the section and pasted the code you have on your read only site and it works!! Thank you man.