Streaming live at 10am (PST)

Embedded video not playing/showing on mobile devices

Hi all,

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.

Thanks


Here is my site Read-Only: https://preview.webflow.com/preview/fieldvisuals?utm_medium=preview_link&utm_source=dashboard&utm_content=fieldvisuals&preview=12ba80f6ffc2eae3edc64887075136ce&mode=preview

Here is my site webflow.io link: https://fieldvisuals.webflow.io

1 Like

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.

Hope this works, otherwise just reply.

1 Like

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?

You can check out my project read only link to see how i did it. And i explained everyting in my solution as you can see.

Hi KD, thank you for sharing your project. Like Cameron said, I can’t seem to find where you posted the following code.

and

It looks like in your preloader embedded code its only 4 lines that pulls the source and loops.

Here is a link to my read only. On the “case study” page I’m trying to get the MRI video to play on mobile.

Your site looks fantastic btw. nice job. This is my first website ive ever built.

I am dumb :slight_smile: 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.

Code I copy and pasted.

 <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 -->
1 Like

Good to see you found my solution. If you have any further questions feel free to message me.

1 Like