Stop video from looping (using Webflow hosted background video hack)

Design help Custom code
1

Can’t seem to figure out how to keep a custom embedded background video from looping (the way you can in native Webflow background videos?)

I followed @learyjk’s guide here and it’s great to be able to custom size a background video. I just can’t seem to figure out how to keep it from looping.

Not great with code, but I did see the loop="" and data-loop="true" and set both of those to ="false" but that didn’t seem to do the trick.

Here’s what the code looks like.

<div
  data-video-urls="https://uploads-ssl.webflow.com/642b35c606abde337de879f9/646e3f9a70a7d3bd2e95945d_IAW VHS Loading Video (1)-transcode.mp4"
  data-autoplay="true"
  data-loop="false"
  data-wf-ignore="true"
  class="w-background-video w-background-video-atom"
>
  <video
    autoplay=""
    loop="false"
    muted=""
    playsinline=""
    data-wf-ignore="true"
    data-object-fit="cover"
  >
    <source
      src="https://uploads-ssl.webflow.com/642b35c606abde337de879f9/646e3f9a70a7d3bd2e95945d_IAW VHS Loading Video (1)-transcode.mp4"
      data-wf-ignore="true"
    />
  </video>
</div>

Any help would be appreciated! Cheers

Here is my site Read-Only: LINK

2

try removing loop altogether instead of setting that attribute to false.

See what i mean be experimenting here: W3Schools Tryit Editor

1 Like
3

Worked like a charm! Thanks very much Nelson :slight_smile: