Autoplay and Looping Videos on Webflow

Hi everyone,

Can someone help me out with autoplay and looping videos? I have put the settings on the third party site (vimeo) to autoplay and loop but that doesn’t work and all that happens is that it loops but doesn’t autoplay.

Thanks everyone.


Here is the website
https://www.amensalami.com

No issue with loop - add:
&loop=1 (or ?loop=1 if loop is the first parameter) (& = and)

One video + conrols

mute video with sound block

chrome/safari/ios: Policy: Autoplaying videos must be muted.
Autoplay and loop embedded videos – Vimeo Help Center

Solution: add ?autoplay=1&muted=1 + allow=autoplay parameter

https://player.vimeo.com/video/81400335?autoplay=1&muted=1&loop=1

More than one auto play video -or- background

Also add - ?background=1 (+ also remove controls)

To embed a video as the background element of your website, add the following parameter to the end of the player URL in your embed code

  1. All player toggles and elements will be turned off (including the play/pause button!)
  2. The video will automatically loop.
  3. The video will be set to autoplay.
  4. The video will be muted.
https://player.vimeo.com/video/293601139?autoplay=1&muted=1&background=1&loop=1
1 Like

Hi @Siton_systems,

So for example where do I put these codes using the images I attached. I want multiple videos to all autoplay and loop. Can you share the specific code to include and where on both images I attached? It will be clearer to me that way.

Thank you.!

A2|690x335

By cms you should copy-paste the url + parameters -

Only change the id from 293601139 to your video-id

https://player.vimeo.com/video/293601139?autoplay=1&muted=1&background=1&loop=1

(Webflow player widget already responsive + create the HTML for you)

Hi Siton_Systems,

Done (See attached image for reference)! but no luck still. Is it because there are multiple videos on the page? do you think?

You right - looks like webflow change parameters when you publish the site.
Write to webflow-support about this issue (No way for me to solve this).

Anyway for now use embed code (Like this) -

1. Collection setting => Create CMS text-field for: viemo url

2. Copy-Paste only the video URL + The parameters you want

Example:
image

Site tree

Add this embed code
(Responsive video)

copy-paste

<div style="padding:56.25% 0 0 0;position:relative;">
<iframe src="{{add her you url feild}}" 
style="position:absolute;top:0;left:0;width:100%;height:100%;" 
frameborder="0" allow="autoplay; fullscreen" 
allowfullscreen></iframe></div>

Add field ("feild") inside the Apostrophes

Result:

The video is responsive (Fits 100% width + keep aspect ratio) - so put this embed anywhere (set max-width, inside grid, flex and so on).

Click OK (The video autoplay + loop + mute) :slight_smile:

1 Like

@jorn are there any help I can get on this? Thank you, and appreciate.

Hi there @adams1234

I was able to take look at your project and at the bottom of the first page you have three Vimeo videos and the one in the middle seems to autoplay and loop and the others not. Do you have the same settings on the other videos?

I don’t have a Pro account at Vimeo and aren’t able to test this.

CloudApp

Kind regards,

Jörn :sweden:

1 Like

Hi Jörn,

thank you for your usual support. I checked and they all have the same setting. When I landed on the page the middle one autoplayed and immediately i refreshed it stoped and the one on the right autoplayed. Iva attached the code for all three. Also I’m experiencing the same problems with the videos in the projects as well

@Jörn Hi there,

I just noticed a pattern. They all autoplay but alternate each time the page is refreshed a different video on one of the 3 play.

Here is the code for one of the project video. Could you kindly suggest where to introduce the code to autoplay and loop?

Thank you always

Thanks for the update.

I reached out to team about this and will come back as soon as I hear back from them.

Kind regards,

Jörn :sweden:

Thank you so much @jorn

Looking forward to the update.

I’m waiting for more answers but you might find these article interesting.

In the article you can find this:
CloudApp

Have tried adding that to your string @adams1234?

Hi Jörn,

Thank you for the usual help, I introduced the autopause=0 and this is what the dice looks like but still it plays in alternates. see below image

also, I added codes for the inner videos on the page which I included <iframe src=“https://player.vimeo.com/video/362669970” width=“100” height=“75” frameborder=“0” ?autoplay=1&muted=1&background=1&loop=1&autopause=0 fullscreen" allowfullscreen>

Do you think it may also be as a result of where I have introduced the codes?

1 Like

Hello!

Maybe you can help me with my issue. I need to set videos in tubs in https://www.steadymotion.net/

The problem is when we use tubs all content in tubs is loading at the same time even if we see just one tub. That’s why when we set autoplay for 2 videos, for example, both videos start playing at the same moment.

It works only for one tub https://www.steadymotion.net/flyovers

I see only one way for now if I want to set ‘autoplay’ for videos – each tab-link should go to new page, but this is weird and doesn’t work for me.

Here is the read-only link

Thanks.

Hi Adams,

Im experiencing the same issue, did you solve your problem?

Cheers.

SOLUTION: This is something that is not webflow specific. But actually the browser. I solved this by setting the video as a background element. If you want a movie to autoplay with sound, this is not possible, and also not recommended. You will need to know the aspect ratio of the video playing and do some tricks with the container.

I used something simular to this to figure out how to set my aspect with css