silvabokis

squarespace development + strategy + UX + design & build + marketing

+44 (0)7908 262225

I'm a freelance user experience consultant who delivers projects large and small for a client base that includes multinationals, SMEs, and sole traders.   
I specialise in formulating new media strategy, defining information architecture, user experience design, interaction design, prototyping, user research & testing, website and application building, and online marketing. 

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. 

See also - Making YouTube, Vimeo and Instagram IFRAMES responsive in Squarespace

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;
}

}