For Admins and Contributors

Youtube Chanel Login:
asitreads@gmail.com
password: John3:16ForGod

Unlinked page password:John3:16ForGod

Image links:

scroll to top arrow button

https://i1155.photobucket.com/albums/p559/scrolltotop/arrow13.png

donation button-3

Home banner-man praying with Bible-video loop

Tutorials:

https://support.squarespace.com/hc/en-us/articles/206543727-Blogging-with-Squarespace

https://support.squarespace.com/hc/en-us/categories/200204575-Videos

Adding autoplay video banners

ASSETS REQUIRED

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

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” autoplay loop>
<source src=”/s/in-the-pr-room.mp4″ type=”video/mp4″>
<source src=”/s/in-the-pr-room.ogv” type=”video/ogg”>
</video>

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