HTML code for autoplay film doesn't work on Chrome

Design help Animations & Interactions
1

I’m using the HTML embed code below for my film in the hero section:

<video autoplay loop style="width:100%; height:100%; position:static;  object-fit: cover; z-index: -1;">
  <source src="http://dl.dropboxusercontent.com/s/mhm61nbb1ukhonx/kk-hero-film.mp4raw=1&autoplay=1" type="video/mp4" />
 Your browser does not support the video tag.
</video>

With the same code, I’ve used it in my other subpage which works fine. The homepage cover film won’t let autoplay happen when you visit it. It will work until you visit different pages and return to the homepage.

I’m wondering if anyone has a similar issue and if there are any solutions for it.
Thanks in advance!

Here is my public share link: Webflow - Ketty Kuutvuori

2

Hi Ketty, it’s a guess, but I’d suspect that the issue is related to using dropbox as the storage location location and specifically the older style links through dl.dropboxusercontent.com. They apparently cause issues for some people.

Is thee a reason you’re not using Webflow’s built in background video support? That seems like a better fit for your publishing goal.

3

Hi Mike,

Thank you for your reply, I’ve tried to use background video, but somehow the video seems broken after I upload it (like the attached screenshot). That’s why I use HTML links instead.

Screenshot 2022-09-14 at 9.24.58
Screenshot 2022-09-14 at 9.24.581920×988 54.1 KB

4

Ah yes. Doing some searches I can see Webflow seems to re-compress background video rather aggressively, which would account for the loss.

But, good news, I think I’ve found the issue. If you’re using a Chromium based browser, it does generally does not allow autoplay unless the video is muted.

To specify that, you just add the keyword muted in, like <video autoplay muted ...

I’ve tested that here in CodePen and it’s working great for me on Chrome.

Also, your video is quite large, with dimensions of 2048x2048. That may not be a problem for playback but it’s much larger than your layout will likely be able to show. I used Handbrake to resize it to 800x800, and it dropped from 15MB to 3MB. You will get faster load times, particularly on phones, if the quality looks OK.

Both videos are in that pen, playing side-by side for comparison.

Here’s that 3MB video if it’s useful.

5

Thank you Mike! You have no idea how long I’ve trying to fix this issue!!! Really appreciate your help!!! Seems like this is working now :pray: :person_cartwheeling: