Background video autoplay delay

Community resources Product feedback
1

Hi,

I’m looking for a script to place in a HTML embed that delays the the start of a background video playing in the hero section of a site. I have an animation which plays for around 5 secs and then the client would like the video to start when the animation finishes.

Any urgent help would be awesome.

Thanks

2

Hi @Dan_Bryan,

Well you could use a video hosted on vimeo instead of Webflow, use the vimeo player API to inject the vimeo id into a Webflow embed and use some more javascript to delay the .play() method.

3

Hi Anthony, appreciate it. I’ll take a look

4

I quickly rewrote a script I wrote back then, maybe it gives you some ideas. The magic happens in the setTimeout function (here, the video initialises after 3s after the DOM has loaded)

setTimeout(function() {
    initVimeo();
  }, 3000);

codepen (with comment to understand what the code does)

HTML

<div class="ratio">
  <!-- 👉🏼 past vimeo video id -->
  <div class="vimeo" id="210599507"></div>
</div>

CSS

.ratio {
  position: relative;
  width: 100%;
  padding-top: calc(1080 / 720 * 100%);
  z-index: 1;
}

.vimeo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: -1;
}

JavaScript

document.addEventListener("DOMContentLoaded", event => {
  initThumbnail();
  setTimeout(function() {
    initVimeo();
  }, 3000);
});

function getVimeoId() {
  const vimeo = document.getElementsByClassName("vimeo")[0];
  return vimeo.getAttribute("id");
}

function initThumbnail() {
  const thumbnail = document.getElementsByClassName("vimeo")[0];
  const request = new XMLHttpRequest();
  const method = "GET";
  const url = "https://vimeo.com/api/v2/video/" + getVimeoId() + ".json";
  request.onload = function() {
    const json = JSON.parse(request.responseText);
    const thumb_src = json[0].thumbnail_large;
    const image = document.createElement("img");
    image.setAttribute("src", thumb_src);
    image.setAttribute("class", "vimeo");
    image.setAttribute("alt", "video");
    thumbnail.appendChild(image);
  };
  request.open(method, url);
  request.send();
}

function initVimeo() {
  const vimeo = document.getElementsByClassName("vimeo")[0];
  const options = {
    id: getVimeoId(),
    autoplay: true,
    autopause: 0,
    loop: true,
    muted: true,
    background: true,
    responsive: true,
    quality: "1080p"
  };
  const player = new Vimeo.Player(vimeo, options);
}

Hope that helps! :lollipop:

1 Like
5

Hi Anthony,

That’s awesome. Thanks very much for this