Canvas Support

Cannot get vimeo video to autoplay

5 replies · opened Nov 17, 2022

OobjetdaNov 17, 2022

Hello Support:

I'm having trouble getting an iframe to autoplay once loaded. When I test on Vimeo's Embed test page it auto plays ok, but when I load the one in question from my canvas template, it sits waiting for the play button to be activated.

I moved away from actioning the original video stored locally, and reverted to using Vimeo within an iframe, so not sure if I should be keeping the video-wrap class and if this is messing with the code?

Here's the code I currently have for the embedded video section:

<section id="section-video" class="slider-element min-vh-100 dark">
<div class="slider-inner">

			&lt;div class="vertical-middle slider-element-fade"&gt;
				&lt;div class="container text-center"&gt;
					&lt;div class="inline-block animated infinite"&gt;[](https://vimeo.com/759746693?autoplay=1&loop=1&autopause=0)&lt;/div&gt;
				&lt;/div&gt;
			&lt;/div&gt;

			&lt;div class="video-wrap"&gt;
				&lt;video id="hero-video" poster="video/Video_screengrab_HD.jpg" preload="auto" loop muted&gt;
					&lt;!--&lt;source src='video/MARKIT_24_BURROWS_MASTER_LR.mp4' type='video/mp4' /&gt;--&gt;
				&lt;/video&gt;
				&lt;div class="video-overlay" style="background-color: rgba(0,0,0,0.2);"&gt;&lt;/div&gt;
			&lt;/div&gt;

		&lt;/div&gt;
	&lt;/section&gt;
SSemicolon WebSTAFFNov 21, 2022

Hello,

Thanks for your Patience!

This is due to Browser’s AutoPlay Policy: https://developer.chrome.com/blog/autoplay/. So currently, if you want AutoPlay Video, you will have to keep them muted. This is applicable to all Browsers.

You will need to use something like this for Locally Hosted Video:
[ch_pre][/ch_pre]

and this for Vimeo:
[ch_pre][/ch_pre]

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

OobjetdaNov 21, 2022

Thankyou for the response,

I'm aware of the autoplay issue with Google etc, and reading over my initial description of the problem I was probably not clear enough so sorry for this.

I have a play button set on the main page to start the video, but when pressed/activated and jumps to the iframe there is another play button within Vimeo that has to be activated as well before the video will start? I've seen other sites that will just have the one button set within the main page (not Vimeo) that plays the video once activated.

Is this an issue I need to address with Vimeo?

Thanks

Jarrett

SSemicolon WebSTAFFNov 22, 2022

Hello,

Thanks for further clarification on this. Currently, this can be fixed in a Lightbox (we are not sure if you mean this as we are assuming that jumping to the iframe is a Lightbox). Additionally, any further JS Customization on the Play Button will have to be done manually.

Please find the following code in the js/plugins.min.js File:
[ch_pre]//player.vimeo.com/video/%id%?autoplay=1[/ch_pre]

and replace it with:
[ch_pre]//player.vimeo.com/video/%id%?autoplay=1&muted=1[/ch_pre]

This will definitely fix the issue in the Lightbox. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

OobjetdaNov 22, 2022

Thankyou for the prompt reply. That fixes the lightbox issue, but unfortunately due to there being dialogue within the video this won't help in this situation. I'll revert back to just having two play buttons to start the video, or possibly going back to a locally hosted video.

regards

Jarrett

SSemicolon WebSTAFFNov 23, 2022

Hello,

We understand. However, unfortunately, AutoPlay can only be enabled on muted Videos.

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard