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
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 - #2 by Brando
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).
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
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: Embed background and chromeless videos – Help Center
@Brando autoplay for Vimeo indeed seems not be working, unfortunately 
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.
autoplay youtube/viemo/html5 video on chrome not working with sound (since April 2018). Read google new policies:
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.
@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.
@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>
Copy of the code saved below on Codepen:
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.
@Siton_Systems It definitely does not render after clearing cache… The code just appears on the live site.
Add live site URL. Thanks
Also add “live url” (No way to test custom code under read-only link) + in what page you put the video
Collection>Projects>A new district for Dublin
Located towards the footer.
Any further advice on this?
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)
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:
https://stackoverflow.com/questions/26649641/muting-an-embedded-vimeo-video
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
Hi @MGAVIOLI66, thanks for the info, I made a quick video to show how to embed the vimeo video on your page: Screen Recording 2018-11-26...
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: Overview dynamic content | Webflow University
I hope this helps
