How to stop looping background video

Continuing the discussion from Make a Background Video Play Once (No Loop):


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @stevo2989 I come across same issue I have to solve and it is a simple task to do. I have add to WF “background video” element it’s id hero-video than I have pointed to its first child that is <video> element it self. This allowed me to remove attribute loop from <video> element. Now bg video plays only once.

const heroVideo = document.getElementById('hero-video').children
heroVideo[0].removeAttribute("loop")
1 Like

Hello, I have tried both recommended techniques to no avail.

Read-only website: https://preview.webflow.com/preview/simons-dandy-project-eeb9aa?utm_medium=preview_link&utm_source=designer&utm_content=simons-dandy-project-eeb9aa&preview=13ae654788ad86dd4755b563aa5236ef&mode=preview

I have tried with and without Webflow.push();
I don’t know what else to try. Can you help me out?

Thanks!

hi @Simon_Loiselle and welcome. You have to place your code in before body end section and it should work. I have tried on your live page and it worked for me.

const heroVideo = document.getElementById('backgroundVideo').children
// console.log(heroVideo)
heroVideo[0].removeAttribute("loop")

You do not need push. If this animation is only on your homepage just place this code into you page settings

2 Likes

Works like a charm, thanks Stan the man!

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.