BG Video - Code for Amazon hosted video

I want use my own videos hosted on Amazon servers to preserve quality compared to webflow BG video feature.

Can anyone point me in the direction of what custom code I need for this, and how to do it?

Alistair

I would consider using Cloudinary or Vimeo API should you really wish to have an alternative to Webflow background component.

Thanks Anthony. Does using Vimeo API automatically take care of OGG and webm versions?

Hi Anthony, do you know anywhere I can find the code to use a vid hosted on Cloudinary. Checked it out, looks like the best option for what I want.

Cheers

Alistair

sure, I use cloudinary hosted video inside Webflow embeds like so:

<video width="100%" height="100%" autoplay loop muted playsinline poster="">
  <source src="https://res.cloudinary.com/alistairgallop/video/upload/myvideo.mp4" type="video/mp4">
</video>

Cloudinary detects the browser you’re on and deliver the best format possible… webp for chrome, mp4 for safari, etc… I use it on my website, works well.

3 Likes

Thanks so much man, just tried it and the quality is so much better!

Love your website, I was actually checking it out the other day before this thread! Love your Namibia video - great work :slight_smile:

1 Like

Hi, i added the above code but it does not work on Android on chrome, I have done some playing around but it only shows on mobile if I add WebM by itself, if I add multiple sources, the video is not shown on mobile again.

** this code does not show on mobile**

<video id='video'  playsinline autoplay muted preload='none' width="100%" height="100%">
    <source  src="https://res.cloudinary.com/cushty/video/upload/c_crop,h_1588,w_2500/v1694428224/MacBook_Air_13-_and_15-inch_with_M2_-_Apple_gidafm.mp4" type="video/mp4"/>
     <source  src="https://res.cloudinary.com/cushty/video/upload/c_crop,h_1588,w_2500/v1694428231/MacBook_Air_13-_and_15-inch_with_M2_-_Apple_u6wuus.webm" type="video/webm"/>
    <p>Your user agent does not support the HTML5 Video element.</p>
</video>

**The code below plays on devices. **
 
 <video id='video'  playsinline autoplay muted preload='none' width="100%" height="100%">
   <source src="  https://res.cloudinary.com/cushty/video/upload/c_crop,h_1588,w_2500/v1694428231/MacBook_Air_13-_and_15-inch_with_M2_-_Apple_u6wuus.webm" type="video/webm"/>
    <p>Your user agent does not support the HTML5 Video element.</p>
 </video>

How can we set the code to play different versions depending on the device, it seems like Chrome needs webm to play on the devices.

Thanks