Streaming live at 10am (PST)

Autoplay not working for vimeo video


#1

Hello all,

I’ve added a video section to our website from Vimeo, I’ve copied in code from tutorials online to make the video autoplay and loop but it is not working for me

Has anybody else had a similar issue with this or have I got the coding wrong somewhere?

Thanks in advance!


Here is my site Read-Only: https://preview.webflow.com/preview/p-w-website?utm_source=p-w-website&preview=4b6234d129ddd2aae070060482b43674


#2

Hi @Holly1

Thanks for posting.

I took a look at your project but I’m not sure what page or section the video is on.

That said, the issue could be related to another similar thread — please check out my reply here: Webflow video & loop issue

It’s also worth mentioning that autoplay specifically can be tricky to implement as Chrome changed the policy around autoplaying videos (see full details here).


#3

Hi @Brando

Sorry - that was silly of me not mentioning the page. It’s on the Paul Hollywood page, you can find it on the work overview page.

Curiously I’ve found out today, that the autoplay function was working last week on a desktop computer using Safari. I’ve since tinkered with the coding and it now doesn’t work on either Chrome or Safari…

I’m afraid that I can’t remember what coding I used last week, but if you wouldn’t mind checking it as it is now I’d really appreciate it

Many thanks


#4

Hmm I’m not sure why the iframe isn’t working.

That said, are you wanting this to be a muted background video, or a video with sound?

If the former, you can use the background video component rather than custom code. This will already autoplay, loop, and be muted by default — all you need to do is upload your video.

If you need the video sound, you may consider using a <video> tag rather than an iframe.

If you’d rather not use any of these options you can check out vimeo’s background video embed guide here: https://help.vimeo.com/hc/en-us/articles/115011183028-Embedding-background-videos


#5

@Brando autoplay for Vimeo indeed seems not be working, unfortunately :frowning: Any chance this could be checked? - I’m in need of this function, too.

The odd thing, when we insert URLs with autoplay=1 at the end of the URL inside a CMS collection, it begins to play inside that CMS item…but not on the actual (published) page.


#6

autoplayyoutube/viemo/html5 video on chrome not working with sound (since April 2018). Read google new policies:

chrome Autoplay Policy Changes

As you may have noticed, web browsers are moving towards stricter autoplay policies in order to improve the user experience, minimize incentives to install ad blockers, and reduce data consumption on expensive and/or constrained networks. These changes are intended to give greater control of playback to users and to benefit publishers with legitimate use cases.

Chrome’s autoplay policies are simple:

  • Muted autoplay is always allowed.

full article


#7

@rowan @Brando I believe I am experiencing the same thing. On other platforms the embedded video works altering the vimeo embedded code slightly. See below:

[?autoplay=1&loop=1&title=0&byline=0&portrait=0&muted=1]

I have created an Embed Code Block and then linked to CMS collection page using a plain text field.

Any help is appreciated.


#8

@MGAVIOLI66 Add Live URL -or- copy-paste the code you added (Screenshot does not help in this case).
Anyway autoplay works fine (with muted)

You remember to put the viemo script in your project?

<!-- embed responsive viemo video muted and autoplay -->
<div style="padding:56.25% 0 0 0;position:relative;">
  <iframe src="https://player.vimeo.com/video/156299091?muted=1&autoplay=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<!-- viemo javascript (put before body) -->
<script src="https://player.vimeo.com/api/player.js"></script>



#10

@Siton_Systems

Copy of the code saved below on Codepen:


#11

OK. Works fine to me (Maybe clear cache). Your video not responsive by the way (You set 800px width). You should use viemo responsive video.


#12

@Siton_Systems It definitely does not render after clearing cache… The code just appears on the live site.


#13

Add live site URL. Thanks


#14

https://preview.webflow.com/preview/this-edition?utm_source=this-edition&preview=5805d0d62647cf27395e0ef908f41ff4


#15

Also add “live url” (No way to test custom code under read-only link) + in what page you put the video


#16

http://this-edition.webflow.io/project/dublinlandings

Collection>Projects>A new district for Dublin
Located towards the footer.


#17

Any further advice on this?


#18

Your code is wrong. Use w3c validation (you miss closing tag or something. Not near laptop but on mobile i see your video as plain text html)


#19

Still no resolve with making the embedded video live. Can anyone advise on what I have overlooked?


#20

Again. In my laptop is working (Your codepen) - try in another laptops and test this codepen.

Not such parameter mute on viemo (but background for pro members):

Related:

Maybe try to player.setVolume(0); to zero to solve this issue (On codepen remember to add jquery)

Webflow:
http://new-landing-page-94e5db.webflow.io/viemo

Read only (See under “viemo” page):
https://preview.webflow.com/preview/new-landing-page-94e5db?utm_source=new-landing-page-94e5db&preview=494ede11904b1e031d52b06fdae80dee


#21

Hi @MGAVIOLI66, thanks for the info, I made a quick video to show how to embed the vimeo video on your page: https://cl.ly/b3d8c34a6424

Custom code and html are not supported in cms fields yet, you need to use that in a custom code widget, then insert fields from your cms into your custom code, see here: https://university.webflow.com/article/how-to-use-dynamic-embeds-on-your-webflow-site

I hope this helps