Squarespace video backgrounds for desktop and mobile

This plugin allows you to have a different background video play depending on the orientation of the user's device.

So if for example the user is viewing your website on a mobile, the portrait video you uploaded will show. If the user turns their mobile device on its side, or they are on a desktop/laptop, the landscape video will show.

How the plugin works

Why this plugin exists

You may have a section on your website that has a background video. That background video looks great on desktop devices like PCs and laptops but on mobile devices held in portrait orientation the sides are cropped off. This plugin allows you to upload a portrait aspect ratio video to the same section, so your landscape aspect ratio background video displays on landscape-orientation devices and your portrait aspect ratio video background displays on portrait-orientation devices.

Plugin need-to-knows

• You must be using Squarespace 7.1.
• The video you upload to display on mobile (portrait-orientated) devices must have a portrait aspect ratio (so it must be taller than it is wide).
• The sections you want this plugin to work on must be using Fluid Engine (this is Squarespace’s new editor where you can drag and drop content blocks anywhere in the section). If you are using the older layout engine editor and you want this plugin please contact me as I will be making it available for layout engine soon.
• You can use videos uploaded directly to Squarespace or Vimeo-hosted videos. It will not work with Youtube background videos.
• This plugin includes code necessary for Vimeo background videos to work on mobile.
• On iOS there is a feature that disables auto-playing videos if the phone is in low power mode. This cannot be avoided.
• The video playing is still subject to a good enough network connection.
• You must have the Squarespace business plan or higher to add the plugin.
• You only need to install the plugin once, rather than install it for every video you add.
• The plugin has been tested on various iOS and Android devices. If a device/browser is able to display a background video, the plugin will work.

How to use the plugin

After purchase you will receive a text file via email containing the plugin and a link to the instructions.

Why no demo site? Simply to protect myself because someone with knowledge of javascript and developer tools could steal the plugin from the demo site without paying for it. I understand that you want to see the plugin working, so that’s why I have a video demoing the plugin. If you have any other questions beyond what is shown in the video, feel free to contact me.

Terms of use

• If there is an issue with the plugin I will provide 30 days of support from the date of purchase.
• If the plugin does not work due to other custom code you’ve added (which is unlikely if your other custom code works correctly) I will need to quote for time to investigate and fix the issue.
• Because the plugin is a digital download, I cannot offer a refund, but please let me know if there are any issues. I will be fair and accommodating.
• Feel free to use the plugin on all your websites.
• You are not allowed to give away or sell this plugin under any circumstances.

Plugin reviews

Read reviews of my plugins. Thank you to everyone who took time out of their day to send me a thank you message or leave a comment on the Squarespace forums and on Youtube.