Streaming live at 10am (PST)

Need a clever, for some advanced Webflow advice

Hi,

We have a slider on our website which is currently containing JPG images for desktop and mobile.

My question:

Can we put video inside the slider that will auto play in the slider instead of an image?

If not possible…

Can we create something in adobe animate can we put that in the slider, we would prefer not to use GIFS as we’re currently finding the quality is shit and large file sizes.

Any help would be appreciated,

Cheers,
Rich

1 Like

hi !

Yes of course, you can put anything you wish inside a slide !
You can add a bg video element or an embed with a little bit of javascript to autoplay the video.

Hi mate, can you give me an example of how I may do this using the embed/autoplay method.

Cheers

Sure, here is a codepen using vimeo player API for you to have a look at.

simply copy the html below into a webflow embed:

<div class="ratio">
  <!-- 👉🏼 past your vimeo video id in the id attribute below -->
  <div class="vimeo" id="210599507"></div>
</div>

then this line before the end of the body tag on the custom code page setting

<!-- Vimeo player API -->
<script defer src="https://player.vimeo.com/api/player.js"></script>

then wrap the javascript below inside a script tag and paste it under the player API script mentioned above:

// 🍋 on DOM loaded
document.addEventListener("DOMContentLoaded", event => {
  console.log("DOM has loaded 🥳");
  // extract + inject thumbnail inside the DOM
  initThumbnail();
  // inject constructed player
  initVimeo();
});

/**
 * dynamically pull id attribute from the DOM
 * use the getVimeoId() function whenever the id is needed
 */

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

/**
 * dynamic thumbnail injection via AJAX request
 * based on vimeo id json response extraction
 */

// 🍓 initThumbnail() declaration
function initThumbnail() {
  const thumbnail = document.getElementsByClassName("vimeo")[0];
  // AJAX request setup
  const request = new XMLHttpRequest();
  const method = "GET";
  const url = "https://vimeo.com/api/v2/video/" + getVimeoId() + ".json";
  // when the request is loaded
  request.onload = function() {
    // parse the response
    const json = JSON.parse(request.responseText);
    // console.log(json);
    // extract the thumbnail url from the json response
    const thumbnailSource = json[0].thumbnail_large;
    console.log(`thumbnail path is ${thumbnailSource} 🥳`);
    // create img tag
    const image = document.createElement("img");
    // inject json src dynamically into img element
    image.setAttribute("src", thumbnailSource);
    image.setAttribute("class", "vimeo");
    image.setAttribute("alt", "this is a video");
    // append img element to the div
    thumbnail.appendChild(image);
    console.log("thumbnail was created 🥳");
  }; // end request.onload
  request.open(method, url);
  request.send();
}

/**
 * A) inject id from the getVimeoId() function into options
 * B) pass the options variable into the player constructor
 */

// 🍉 initVimeo() declaration
function initVimeo() {
  const vimeo = document.getElementsByClassName("vimeo")[0];

  // player options
  const options = {
    id: getVimeoId(),
    autoplay: true,
    autopause: 0,
    loop: true,
    muted: true, // autoplay on mobile
    background: true, // remove all controls
    responsive: true, // experimental
    quality: "1080p"
  };

  // player constructor initialisation
  const player = new Vimeo.Player(vimeo, options);

  player.loadVideo(getVimeoId()).then(function(id) {
    console.log(`video ${id} has loaded 🥳`);
  });

  player.on("play", event => {
    console.log("video is playing ❤️");
  });
} // end of initVimeo()

hope that helps !

2 Likes

Ok brilliant, but then how do I embed the actual video to work in the slider mask?

like so

1 Like

Thanks Anthony! Do you know if its possible to use an alternative video hosting source? To remove the video logo I’d need to purchase a premium account i believe. I wonder if this can be done by hosting on google drive or dropbox?

Not sure what you mean with the video logo - vimeo does offer a basic, free membership, but it limits you to 500MB maximum storage per week which is, I think, the only limitation.

1 Like

This is great, it’s worked perfectly on desktop. Anyway that we can get it working on mobile, or am I better replacing the video with an image for mobile.

As you can see, it’s not working properly on mob:

https://somethingfamiliar.webflow.io/projects/valluga

Actually I think I’ve managed to get it to work now on mobile, but I just need to create another video in the correct format.

The weird thing on my slider now, is that when you’re using an iphone you can scroll all the way down the page and when you use an android device like a samsung, the slider is as is should be, fixed.

Any ideas how I can stop this abillity to scroll down the page, it wasn’t happening before.

Heres’ my links:

https://somethingfamiliar.webflow.io/projects/valluga

https://preview.webflow.com/preview/somethingfamiliar?utm_medium=preview_link&utm_source=designer&utm_content=somethingfamiliar&preview=cca27db9eefc50ce2aaa7d366b6c8b37&pageId=5d5ac8368602db71779dea84&mode=preview

Lol, agreed! Cheers Rich!

1 Like