Background video autoplay delay


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.


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.

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

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() {
  }, 3000);

codepen (with comment to understand what the code does)


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


.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;


document.addEventListener("DOMContentLoaded", event => {
  setTimeout(function() {
  }, 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 = "" + 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");
  };, url);

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

Hi Anthony,

That’s awesome. Thanks very much for this