CMS Video Autoplay

Hi guys,

I’m using the CMS video component on a page and want it to autoplay on load. Any ideas on how to make this work without custom code?

Thanks


Here is my public share link

Take a look at this info. Let me know if you need any help, if you haven’t fixed it.

You can also do this manually by adding the following parameters into your embed code:

loop=1
autoplay=1

If you have more than one video autoplaying on a particular page, you will also need to include this parameter:

autopause=0

So, for example, if you were embedding two autoplay, looping, videos on a page, the embed code for each would look like this:

Autoplay Restrictions

Some browsers specifically block autoplay. In these cases, your video will revert back to the original thumbnail and controls, requiring viewers to select play to start playback.

Safari version 11+ (Desktop)

Documentation: Auto-Play Policy Changes for macOS | WebKit
Policy: Autoplaying videos must be muted. Viewers can choose to block or allow unmuted autoplay for specific domains on their setup

Chrome version 66+ (Desktop/Mobile)

Documentation: Autoplay policy in Chrome - Chrome Developers
Policy: Autoplaying videos must be muted. Videos that are frequently visited by the viewer are permitted to autoplay with sound

iOS Safari

Documentation: New <video> Policies for iOS | WebKit
Policy: Autoplaying videos must be muted.

Firefox 66+ (Desktop/Mobile)

Documentation: Allow or block media autoplay in Firefox | Firefox Help
Policy: Firefox now blocks videos with sound from playing automatically. This change is being gradually rolled out to users in Quantum version 66. Viewers can choose to block or allow unmuted autoplay for specific domains on their setup

There is no way to stop these autoplay restrictions; however, you can mute your video to ensure autoplay is always honored. Just add one of the following parameters to the end of the player URL in your embed code:

This parameter automatically disables all elements in the player (play bar, buttons, etc), autoplays, loops, and mutes your video on load.
?background=1:

This parameter will automatically mute your video on load. Once your video plays, viewers can manually un-mute by clicking on the volume bar within the player.
?muted=1

Both of these parameters will force your video to load as muted in all browsers. Videos without audio tracks (or audio tracks without sound) will not be considered muted by browsers. In order to bypass autoplay restrictions, you must use one of the embed parameters above.

If your webpage has permission to autoplay but your video is still not playing, you may need to add the

allow=autoplay

parameter to the iframe, and any iframe in your webpage that the player is contained within.

Here is an example using the iframe:

Hope this helps :slight_smile: Have fun!

1 Like

i have the same question… but the videos are pulled from the CMS they are not embedded into the page? how can we make them autoplay which you scroll the page?

Many thanks in advance,
Stelios K

@Stelios_Kyriakides,

Yep, using the CMS will be different for everything; including images. You can’t manage an asset with CSS using the CMS, unless it’s a code override, but it’s challenging. The CMS is best when the content asset is set and static, not dynamic.

I would add it to the page as a symbol if you plan on using it on multiple pages or articles. I haven’t found any other way to manage it like this. You should contact support directly and see what they can offer as another option. But I’m fairly confident you’ll need to put it on the page; similar to a background asset, you know? You can’t add CSS to it directly.

Contact them and see what they say.

@garymichael1313 thanks a lot for your prompt reply.

Stay safe. Have a lovely evening

No problem, have fun see ya :slight_smile: