Autoplay with Vimeo video on Chrome not working

Design help General
1

I’ve been battling to get autoplay to work on a video modal using a Vimeo video.

I have tracked it down to being a Chrome specific and Vimeo specific issue. You can see in the live link below that the video plays for 1s then pauses itself.

Live link shows issue with Vimeo DOES NOT autoplay:
[https://vimeo-autoplay.webflow.io/](https://Live Link)

[Webflow - vimeo-autoplay](https://Read only link)

My solution:

Since I needed a solution I persisted and found a solution in case anyone else runs into the same issue.

This is using click events to play the video when a Modal opens and pauses it when it is closed.

However I could not get this to work with the Webflow video element. I ended up adding it into an HTML embed

eg:

<iframe src="https://player.vimeo.com/video/XYZ" frameborder="0"></iframe>

The Video ID I put straight on the embed

CleanShot 2021-06-16 at 19.27.38@2x

var video = document.getElementById("video");

$(document).ready(function() {
  $("#closeModal").click(function(){
		var iframe = video.getElementsByTagName("iframe")[0].contentWindow;
    	iframe.postMessage('{"method":"pause"}', '*');
    });
});
  
  $(document).ready(function() {
  $("#openModal").click(function(){
		var iframe = video.getElementsByTagName("iframe")[0].contentWindow;
    	iframe.postMessage('{"method":"play"}', '*');
    });
});
2

Hi @andyjames because autoplay is restricted and all browsers require user interaction to give them the control if they want to see or hear video and/or audio (willing or health issue reasons) I was curious how you have got over this global autoplay restriction. I have tried your solution in Safari, Chrome, Firefox and you solution fails in all of them.

3

Hi @Stan

To be specific this is when using https://video-url&autoplay=1 which is intended to play the video and bypass the restriction. It works fine with youtube and vimeo works in other browsers just not Chrome.

Also since I needed the video to play when a modal opened it is the desired behaviour as the user is clicking a play button on the page and then having to click play again on the video is not ideal UX. This also takes care of pausing the video when the user closes the modal.

I have updated my post to include some additional info, my solution unfortunately does not work with the Webflow Video element, so I added the iframe manually in an HTML embed.

With some more time I could maybe get it to work with the Webflow video element but based on the output when using this, Webflow adds a video iframe wrapper and then inside that iframe the video embed iframe is added. Therefore it needs javascript that will find the parent iframe and then inside that iframe find the vide iframe to trigger play and pause.

4

hi @andyjames here is my test. I’m not sure what obeying this restriction will do with page ranking. It may or may not have a negative impact.

https://cln.sh/vXO68v

5

Are you testing it on the link in my original post?

This one:

https://vimeo-autoplay.webflow.io/

Or did you try with the code provided in your own project?

The link I posted will not work… the link was intended to show the issue that it does not autoplay in Chrome. I did not post a link with the solution I only added the code and description I used to resolve it.

6

Yes @andyjames I did, I have tried now on your a newly posted link with identical result. No. I haven’t applied on my test project as I’m not interested breaking these rules that were set also to protect people with health issues. if I have request like that I will explain client these reasons and they understand why there have to be a play button. :wink:

7

I have tried now on your a newly posted link with identical result

I posted exactly the same link (of it NOT working in chrome) as my original post for reference so yeah it wouldn’t work

@Stan I think you are misunderstanding the implementation and reason for this need. I am well versed in UX and accessibility. This is not breaking any rules nor is it a concern to people with health issues.

I am NOT trying to make a video play when the page loads. Nor is my solution doing so. Notice that ALL code is triggered on a click event. NOT page load.

I clearly stated that in my implementation the user clicks play on an icon on my page… therefore the user shows intent to watch the video. When the modal opens the video should play because the user asked for it to play. If it does not then the user must click play twice which is a much worse user experience.

Here is a youtube video of someone trying to explain how to do this and it works but it is using youtube. This however does not work with Vimeo.

8

Hi @andyjames I do not experiencing in your example any interaction.
https://cln.sh/ZGzpI5

9

You are completely misunderstanding.

I already said twice the link you are clicking on is NOT my solution. Please read my original post and my replies again.

I specifically added the preview link to show that autoplay DOES NOT work in Chrome. As in… it is showing what IS BROKEN. NOT my solution!

Hence you are experiencing just that… it not working.

The link is using Webflows video element and demonstrates simply that

https://vimeo-url&autoplay=1 - Does not work

https://youtube-url&autoplay=1 - Does work

This is in no way close to my implementation at all.

I even posted a youtube video of a Webflow tutorial on how to autoplay when a user opens a modal. That is very similar to my actual solution.

So to be clear! On my clients site which I do not want to make public yet, the user clicks on an icon to open a modal to play the video.

10

Here is an explanation video.

11

HI @andyjames thanks for video now I finally get it :innocent: All confusion was that you said that you have solution and post links with example that was not working (that was for me most confusing part) instead of posting working sample as you have in explanation video. Now I see that video is triggered with interaction. :wink: :ok_hand:

12

I think what caused the confusion was your use of the term solution to refer to something that wasn’t actually solving your problem.

So did you ever figure out how to get Vimeo videos to autoplay?

13

hi @shawncarrie you can read in Vimeo documentation how it can be done.

simple example code

<iframe src="https://player.vimeo.com/video/708244501?background=1&h=a599b9c8aa" width="100%" height="100%" frameborder="0" allow="autoplay;"></iframe>

RESULT

https://modal-query.webflow.io/vimeo