Adding autoplay video banners to a Squarespace website

We recently added autoplay video idents to various pages of the In The White Room website . 

The videos are designed to fade in and start playing about a second after the page loads.  

NB. Video content will not autoplay on iOS and Android versions, which means that a fallback is needed for smartphones and tablets. In the example below, we insert a still image as a fallback. 

The following is a step by step guide to implementing the autoplay banners.  The In The White Room website uses the Squarespace Takk template, but the code below should work with any Squarespace template. 

ASSETS REQUIRED

To support as many operating systems and browsers as possible you will need:

  • video in mp4 format

  • video in ogv (Ogg Vorbis video) format

  • a still from the video as fallback for mobile devices that do not support autoplay

NOTE: Each video file must be under 20Mb in size otherwise they will exceed Squarespace's maximum file upload size limit. 


UPLOADING  THE ASSETS

Go to a dummy page and create a text block.

Add a text link to the block

Select the Files option 

Now upload the mp4, ogv and still image via the New File option

 
INSERT THE ASSETS ON THE PAGE

Add a code block to the page and paste in the following code, substituting the file names to match the ones uploaded. 

<video width="100%" height="43.75%" id="identvideo">
<source src="/s/in-the-pr-room.mp4" type="video/mp4">
<source src="/s/in-the-pr-room.ogv" type="video/ogg">
</video>
<img src="/s/in-the-interiors-pr-room.jpg" width="100%" height="43.75%" id="mobilefallback">


INSERT THE AUTOPLAY CODE ON THE PAGE

NB. Code samples may be reused subject to certain conditions.


Go to the page's Settings, select the Advanced tab and add the following code to the Page Header Code Injection field.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
function play_video(){
$('#identvideo').get(0).play()
 };
 window.setTimeout( play_video, 1500 ); // 1.5 seconds 
});
</script>


NB. In some cases there may already be code in the Code Injection field. In that case, paste the code at  the bottom of the field, after any pre-existing code. 

ADD CUSTOM CSS TO ALLOW CORRECT DISPLAY OF THE VIDEO AND/OR FALLBACK STILL

The following css should be pasted into the custom css editor.

/* Code to control banner animations and fallback for iPad and smartphones. */

/* General rule first - neither video nor fallback display */
#identvideo, #mobilefallback {
display:none;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
#identvideo, #mobilefallback {
display:none;
}
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
 {

#identvideo {
display:none;
}
#mobilefallback {
display:inherit;
} 
}

/* computer displays */
/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1025px) {
#identvideo {
display:inherit;
}

}
Colin Irwin

I’m Colin Irwin, a freelance Squarespace Designer & Developer based in London, UK, with clients in the USA and around the world.

I’m a recognised Squarespace expert. I design and build Squarespace sites for everyone from charities and start ups to major established brands.

https://www.silvabokis.com
Previous
Previous

Getting Javascript charts working in Squarespace

Next
Next

Making YouTube, Vimeo and Instagram IFRAMES responsive in Squarespace