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