1

Load Animation

The CSS bit

Copy and paste the following CSS code into the Custom CSS area of your site, found under the Design menu.

.loadanime {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: #fff;
}
.loadanime:after {
content: "X";
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
filter: grayscale(1);
background: url('http://static1.squarespace.com/stat-
ic/54dcf1f3e4b03174c3dc75f5/t/5695a5b6c647ad2ec2534f93/1452647862899/loader.gif');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
font-family: monospace;
font-size: 0px;
display: block;
height: 80px;
width: 80px;
top: 50% !important; left: 50% !important; -webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: trans-
late(-50%, -50%);
}

The JS bit
Copy and paste the following code into the header code injection area of your page and click save. If your page is within
an index, paste the code into the header code injection area of the Index, not the page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div class="loadanime"></div>
<script type="text/javascript">
$(window).load(function() {
$(".loadanime").fadeOut("slow");
})
</script>
 2

VIDEO BACKGROUND CONTROLS

Insert the Block

Insert a Code Block into the page content area of your site. The position is not important as long as it is below the video
background.
The code block will be hidden when viewing the site.

Copy and Paste

Delete the example content in the code block and copy and paste the code below into it.
Select the correct code for your Video background.
If your video is hosted on Vimeo, use the Vimeo Hosted Code, or, select the YouTube Hosted Code for YouTube.

'VIMEO HOSTED' CODE

<style type="text/css">

#vimeoplayer-sqst{

display:inline-block !important;

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<script src="https://player.vimeo.com/api/player.js"></script>

<script type="text/javascript">

function init(){url=$(".sqs-video-background, .gallery-video-background").first().attr("da-

ta-con-
fig-url"),$("#vimeoplayer").length>0?(build_player(),build_controls(),add_control_listeners()):a
ttempts<max_attempts&&(attempts++,setTimeout(function(){init()},100))}function build_play-
er(){$("#vimeoplayer").after('<iframe id="vimeoplayer-sqst" class="background-video ready"
src="//player.vimeo.com/video/178612704?api=1&amp;background=1" data-ready="true"
style="left:50%;top:50%;width:100%;height:100%;trans-
form:translate(-50%,-50%);position:absolute;"></iframe>'),$("#vimeoplayer").remove();var
a=parse_link(url);$("#vimeoplayer-sqst").attr("src",a);var b=document.getElementById("vimeoplay-
er-sqst");player=new Vimeo.Player(b),resize_player(),player.play(),player.setVol-
ume(0),player.setLoop(!0)}function parse_link(a){var e,c=/(?:http?s?:\/\/)?(?:ww-
w\.)?(?:vimeo\.com)\/(?:.*\/)?(.+)/g,d=/(?:http?s?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(
?:watch\?v=)?(.+)/g;if(c.test(a))var f="https://player.vimeo.com/video/$1",e=a.re-
place(c,f);if(d.test(a))var f="https://www.youtube.com/embed/$1?api=1&back-
ground=1",e=a.replace(d,f);return e}function build_controls(){var
b=".sqs-slide",c=".sqs-slide-layer-content";$(c).length>0&&(b=c),$(".banner-thumbnail-wrapper,
#banner-area-wrapper, .banner-image, .image-wrapper, .Intro, .title-desc-wrapper, .main-image,
.Index-page--has-image, "+b).first().append('<div id="button_container"></div>'),$("#button_con-
tainer").append('<div id="play_pause" class="button_switcher"><img src="https://stat-
ic1.squarespace.com/stat-
ic/54dcf1f3e4b03174c3dc75f5/t/5800e78959cc685e1418ff13/1476454281822/whiteplay.png"
class="video_button play_pause_btn" id="play_button"/><img src="https://stat-
ic1.squarespace.com/stat-
ic/54dcf1f3e4b03174c3dc75f5/t/5800e75f29687f13a413de10/1476454239130/whitepause.png"
class="video_button play_pause_btn" id="pause_button"/></div>'),$("#button_container").ap-
pend('<div id="mute_unmute" class="button_switcher" style="margin-left: 5px;"><img
src="https://static1.squarespace.com/stat-
ic/54dcf1f3e4b03174c3dc75f5/t/57f42eaa893fc0123d94e98d/1475620522820/whtmute.png"
class="video_button mute_unmute_btn" id="mute_button"/><img src="https://stat-
ic1.squarespace.com/stat-
ic/54dcf1f3e4b03174c3dc75f5/t/57f42e99893fc0123d94e8e4/1475620505075/whtsound.png"
class="video_button mute_unmute_btn" id="unmute_button"/></div>'),$("#button_contain-
er").css({posi-
tion:"absolute",width:"60px",height:"25px",right:"5px",bottom:"5px","z-index":1e4}),$(".button_s
witcher").css({width:"25px",height:"25px",position:"relative",display:"inline-block"}),$(".video
_button").css({display:"inline-block",position:"absolute","vertical-align":"top",opacity:.6,widt
h:"25px",height:"25px",cursor:"pointer"}),$("#play_button, #unmute_button").css("opacity",0)}-
function add_control_listeners(){$(".play_pause_btn").click(func-
tion(){paused?(player.play(),paused=!1):(player.pause(),paused=!0),play_pause_switch()}),$(".mut
e_unmute_btn").click(function(){muted?(player.setVolume(.5),muted=!1):(player.setVolume(0),muted
=!0),mute_unmute_switch()})}function play_pause_switch(){paused?($("#play_button").ani-
mate({opaci-
ty:.6},500),$("#pause_button").animate({opacity:0},1e3)):($("#play_button").animate({opacity:0},
1e3),$("#pause_button").animate({opacity:.6},500))}function mute_unmute_switch(){mut-
ed?($("#mute_button").animate({opaci-
ty:.6},500),$("#unmute_button").animate({opacity:0},500)):($("#mute_button").animate({opacity:0}
,500),$("#unmute_button").animate({opacity:.6},500))}function resize_player(){var g,h,a=$("#vi-
meoplay-
er-sqst"),b=a.parent(),c=b.width(),d=b.height(),e=.2,f=c/d;f<16/9?(h=d,g=d*(16/9)):(g=c,h=c/(16/
9)),g+=e*g,h=g/(16/9),a.width(g),a.height(h)}function watch(){MutationObserver=window.Mutation-
Observer||window.WebKitMutationObserver,new MutationObserver(function(a){for(var
b=0;b<a.length;b++){if("attributes"===a[b].type){var d=new Event("pageChange");document.dis-
patchEvent(d)}}}).observe(document.body,{attributes:!0,attributeFilter:["id"]})}var play-
er,url,paused=!1,muted=!0,max_attempts=100,at-
tempts=0;init(),$(window).resize(function(){resize_player()}),document.addEventListener("pageCha
nge",function(){paused=!1,muted=!0,attempts=0,init()}),window.onload=watch;

</script>
VIDEO BACKGROUND CONTROLS

Insert the Block

Insert a Code Block into the page content area of your site. The position is not important as long as it is below the video
background.
The code block will be hidden when viewing the site.

Copy and Paste

Delete the example content in the code block and copy and paste the code below into it.
Select the correct code for your Video background.
If your video is hosted on Vimeo, use the Vimeo Hosted Code, or, select the YouTube Hosted Code for YouTube.

'VIMEO HOSTED' CODE

<style type="text/css">

#vimeoplayer-sqst{

display:inline-block !important;

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<script src="https://player.vimeo.com/api/player.js"></script>

<script type="text/javascript">

function init(){url=$(".sqs-video-background, .gallery-video-background").first().attr("da-

ta-con-
fig-url"),$("#vimeoplayer").length>0?(build_player(),build_controls(),add_control_listeners()):a
ttempts<max_attempts&&(attempts++,setTimeout(function(){init()},100))}function build_play-
er(){$("#vimeoplayer").after('<iframe id="vimeoplayer-sqst" class="background-video ready"
src="//player.vimeo.com/video/178612704?api=1&amp;background=1" data-ready="true"
style="left:50%;top:50%;width:100%;height:100%;trans-
form:translate(-50%,-50%);position:absolute;"></iframe>'),$("#vimeoplayer").remove();var
a=parse_link(url);$("#vimeoplayer-sqst").attr("src",a);var b=document.getElementById("vimeoplay-
er-sqst");player=new Vimeo.Player(b),resize_player(),player.play(),player.setVol-
ume(0),player.setLoop(!0)}function parse_link(a){var e,c=/(?:http?s?:\/\/)?(?:ww-
w\.)?(?:vimeo\.com)\/(?:.*\/)?(.+)/g,d=/(?:http?s?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(
?:watch\?v=)?(.+)/g;if(c.test(a))var f="https://player.vimeo.com/video/$1",e=a.re-
place(c,f);if(d.test(a))var f="https://www.youtube.com/embed/$1?api=1&back-
ground=1",e=a.replace(d,f);return e}function build_controls(){var
b=".sqs-slide",c=".sqs-slide-layer-content";$(c).length>0&&(b=c),$(".banner-thumbnail-wrapper,
#banner-area-wrapper, .banner-image, .image-wrapper, .Intro, .title-desc-wrapper, .main-image,
.Index-page--has-image, "+b).first().append('<div id="button_container"></div>'),$("#button_con-
tainer").append('<div id="play_pause" class="button_switcher"><img src="https://stat-
ic1.squarespace.com/stat-
ic/54dcf1f3e4b03174c3dc75f5/t/5800e78959cc685e1418ff13/1476454281822/whiteplay.png"
class="video_button play_pause_btn" id="play_button"/><img src="https://stat-
ic1.squarespace.com/stat-
ic/54dcf1f3e4b03174c3dc75f5/t/5800e75f29687f13a413de10/1476454239130/whitepause.png"
class="video_button play_pause_btn" id="pause_button"/></div>'),$("#button_container").ap-
pend('<div id="mute_unmute" class="button_switcher" style="margin-left: 5px;"><img
src="https://static1.squarespace.com/stat-
ic/54dcf1f3e4b03174c3dc75f5/t/57f42eaa893fc0123d94e98d/1475620522820/whtmute.png"
class="video_button mute_unmute_btn" id="mute_button"/><img src="https://stat-
ic1.squarespace.com/stat-
ic/54dcf1f3e4b03174c3dc75f5/t/57f42e99893fc0123d94e8e4/1475620505075/whtsound.png"
class="video_button mute_unmute_btn" id="unmute_button"/></div>'),$("#button_contain-
er").css({posi-
tion:"absolute",width:"60px",height:"25px",right:"5px",bottom:"5px","z-index":1e4}),$(".button_s
witcher").css({width:"25px",height:"25px",position:"relative",display:"inline-block"}),$(".video
_button").css({display:"inline-block",position:"absolute","vertical-align":"top",opacity:.6,widt
h:"25px",height:"25px",cursor:"pointer"}),$("#play_button, #unmute_button").css("opacity",0)}-
function add_control_listeners(){$(".play_pause_btn").click(func-
tion(){paused?(player.play(),paused=!1):(player.pause(),paused=!0),play_pause_switch()}),$(".mut
e_unmute_btn").click(function(){muted?(player.setVolume(.5),muted=!1):(player.setVolume(0),muted
=!0),mute_unmute_switch()})}function play_pause_switch(){paused?($("#play_button").ani-
mate({opaci-
ty:.6},500),$("#pause_button").animate({opacity:0},1e3)):($("#play_button").animate({opacity:0},
1e3),$("#pause_button").animate({opacity:.6},500))}function mute_unmute_switch(){mut-
ed?($("#mute_button").animate({opaci-
ty:.6},500),$("#unmute_button").animate({opacity:0},500)):($("#mute_button").animate({opacity:0}
,500),$("#unmute_button").animate({opacity:.6},500))}function resize_player(){var g,h,a=$("#vi-
meoplay-
er-sqst"),b=a.parent(),c=b.width(),d=b.height(),e=.2,f=c/d;f<16/9?(h=d,g=d*(16/9)):(g=c,h=c/(16/
9)),g+=e*g,h=g/(16/9),a.width(g),a.height(h)}function watch(){MutationObserver=window.Mutation-
Observer||window.WebKitMutationObserver,new MutationObserver(function(a){for(var
b=0;b<a.length;b++){if("attributes"===a[b].type){var d=new Event("pageChange");document.dis-
patchEvent(d)}}}).observe(document.body,{attributes:!0,attributeFilter:["id"]})}var play-
er,url,paused=!1,muted=!0,max_attempts=100,at-
tempts=0;init(),$(window).resize(function(){resize_player()}),document.addEventListener("pageCha
nge",function(){paused=!1,muted=!0,attempts=0,init()}),window.onload=watch;

</script>
3

'YOUTUBE HOSTED' CODE

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>

<script type="text/javascript" src="https://www.youtube.com/player_api"></script>

<script type="text/javascript">

function onYouTubeIframeAPIReady(){init()}function init(){url=$(".sqs-video-background, .gal-

lery-video-background").first().attr("data-con-
fig-url"),build_player(),build_controls(),add_control_listeners()}function build_play-
er(){if(vimeo){var a=document.getElementById("vimeoplayer");player=$f(a)}else play-
er=YT.get("player")}function build_controls(){var a=".banner-thumbnail-wrapper, #banner-ar-
ea-wrapper, .banner-image, .title-desc-wrapper, .index-section-wrapper, .Index-page-content,
.image-wrapper, .Intro, .main-image",b=".sqs-slide",c=".sqs-slide-layer-con-
tent";$(c).length>0&&(b=c);var d=$(a+", "+b).first();d.append('<div id="button_container"></-
div>'),vimeo&&$("#button_container").append('<div id="play_pause" class="button_switcher"><img
src="https://static1.squarespace.com/stat-
ic/54dcf1f3e4b03174c3dc75f5/t/5800e78959cc685e1418ff13/1476454281822/whiteplay.png"
class="video_button play_pause_btn" id="play_button"/><img src="https://stat-
ic1.squarespace.com/stat-
ic/54dcf1f3e4b03174c3dc75f5/t/5800e75f29687f13a413de10/1476454239130/whitepause.png"
class="video_button play_pause_btn" id="pause_button"/></div>'),$("#button_container").ap-
pend('<div id="mute_unmute" class="button_switcher" style="margin-left: 5px;"><img
src="https://static1.squarespace.com/stat-
ic/54dcf1f3e4b03174c3dc75f5/t/57f42eaa893fc0123d94e98d/1475620522820/whtmute.png"
class="video_button mute_unmute_btn" id="mute_button"/><img src="https://stat-
ic1.squarespace.com/stat-
ic/54dcf1f3e4b03174c3dc75f5/t/57f42e99893fc0123d94e8e4/1475620505075/whtsound.png"
class="video_button mute_unmute_btn" id="unmute_button"/></div>'),$("#button_contain-
er").css({posi-
tion:"absolute",width:"60px",height:"35px",right:"15px",bottom:"15px","z-index":1e4}),$(".button
_switcher").css({width:"35px",height:"35px",position:"relative",display:"inline-block"}),$(".vid
eo_button").css({display:"inline-block",position:"absolute","vertical-align":"top",opacity:.99,w
idth:"35px",height:"35px",cursor:"pointer"}),$("#play_button, #unmute_button").css("opaci-
ty",0)}function add_control_listeners(){$(".play_pause_btn").click(func-
tion(){build_player(),paused?(vimeo?player.api("play"):player.playVideo(),paused=!1):(vimeo?play
er.api("pause"):player.pauseVideo(),paused=!0),play_pause_switch()}),$(".mute_unmute_btn").click
(function(){build_player(),muted?(vimeo?player.api("setVolume",.5):player.unMute(),muted=!1):(vi
meo?player.api("setVolume",0):player.mute(),muted=!0),mute_unmute_switch()})}function
play_pause_switch(){paused?($("#play_button").animate({opaci-
ty:.99},500),$("#pause_button").animate({opacity:0},1e3)):($("#play_button").animate({opacity:0}
,1e3),$("#pause_button").animate({opacity:.6},500))}function mute_unmute_switch(){mut-
ed?($("#mute_button").animate({opaci-
ty:.99},500),$("#unmute_button").animate({opacity:0},500)):($("#mute_button").animate({opacity:0
},500),$("#unmute_button").animate({opacity:.6},500))}var player,url,paused=!1,mut-
ed=!0,vimeo=!1;

</script>