Squarestuff

Share this post

Auto Playing Videos in Squarespace

www.carljohnson.space

Discover more from Squarestuff

Web development, motion graphics and all kind of other ...stuff!
Continue reading
Sign in

Auto Playing Videos in Squarespace

Carl Johnson
Jan 2, 2023
Share this post

Auto Playing Videos in Squarespace

www.carljohnson.space
Share

Updated 28/3/2021

I put out a video a couple of weeks back (yep, the one above) and a few people have reached out about problems with the video not auto playing. This is my fault for not explaining the video player and autoplaying policies in the video. Hopefully, this post will explain a bit more.For those who are having problems with the video not auto playing either on the live site, or in Incognito mode (and thanks again to everyone who's reached out in the comments on YouTube) a couple of things can be causing this:First of all, if you are on a version 7 template and Ajax Loading is disabled, this can stop the video from auto playing. Try enabling Ajax Loading by going to 'Design > Site Styles > Site Loading | Enable Ajax Loading'.

However, if your site is quite heavy with custom CSS enabling Ajax Loading can cause more problems than it fixes ...as I pointed out in this Tweet:

Twitter avatar for @MrJohnoCP
Carl Johnson @MrJohnoCP
#Squarespace Pro Tip: When in doubt, disable Ajax Loading! That's it 🤪
1:43 PM ∙ Mar 1, 2021

Hmmm, maybe not in this case.

Another possible cause is if your video has audio. Chromium browsers will auto automatically pause the video in order to 'improve the user experience, minimise incentives to install ad blockers, and reduce data consumption on expensive and/or constrained networks'.

In this case you will need to either remove the audio from the source video, or add ‘muted’ to the video player.

Adding muted to your video player is as simple as placing 'muted' after the width controls in the video player opening tag, like so:

<video autoplay="autoplay" loop="true" width="100%" muted> 
<source src="YOURVIDEOURL" type="video/mp4"/> 
</video>

If audio is essential it has to be muted to start auto playing. In this case you might want to add controls to the video to allow the user to unmute the video. This, again, can be done by adding 'controls' to the video player opening tag:

<video autoplay="autoplay" loop="true" width="100%" muted controls> 
<source src="YOURVIDEOURL" type="video/mp4"/> 
</video>

More info about auto playing videos can be seen here


Show support

Buy me a coffee

Share this post

Auto Playing Videos in Squarespace

www.carljohnson.space
Share
Previous
Next
Comments
Top
New
Community

No posts

Ready for more?

© 2023 Carl Johnson
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing