Video Loading Screen

Description

• this is update version of Text Loading Screen
• loading screen with video/image/text
• view demo (with Youtube) – pass: abc
• view demo 2 (with Vimeo) – pass: abc
• view demo 3 (with Uploaded Video) – pass: abc
• buy me a coffee

#1. Install Code

If you need to make Loading screen with Text or Image, please use this version

#1.1. Click Website > Pages

#1.2. Scroll down to Custom Code > Code Injection

• If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1.
• If you want to make effect run on One Page only, see #3.2

#1.3. Add this code into Code Injection > Footer

• If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1.
• If you want to make effect run on One Page only, see #3.2

<!-- 06.26c08v2 Video Loading Screen -->
<script>
var splashOptions = {
  loaderType: 'vimeo', /* text, image, youtube, vimeo, hosted */
  loaderTitle: '@tuanphan',
  loaderImage: 'https://images.squarespace-cdn.com/content/v1/68985bba91a8d8273678b74b/1756781989765-M8DG7RMYNS5MWC7CVLKM/unsplash-image-igKjieyjcko.jpg?format=1500w',
  loaderVideoUrl: 'https://vimeo.com/222842052',
  loaderVideoMute: true, /* true = always muted, false = show unmute button */
  loaderAdditionalDelay: 5000,
  loaderFadeTime: 1000,
  showLoaderOnlyOnce: false,
  overlayColor: '#fff',
  titleColor: '#000',
  titleSize: '95px',
  titleMobileSize: '48px',
  imageHeight: '55px',
  imageMobileHeight: '35px',
  exitAnimation: 'fade', /* fade, slideLeft, slideRight, slideUp, slideDown */
  redirectEnabled: false,
  redirectUrl: '/'
}
</script>
<script src="https://code.beaverhero.com/other/0626c08v2videoloadingscreen.js"></script>

#1.4. You can update Video URL in Line 07

loaderVideoUrl: 'https://vimeo.com/222842052',

#1.5. Note: Line 09, Line 10

• loaderAdditionalDelay — Extra time (in ms) the splash screen stays visible after the page has fully loaded. 1000 = wait 1 second before starting the exit animation.
• loaderFadeTime — Duration (in ms) of the exit animation itself. 1000 = the fade/slide animation takes 1 second to complete.

#2. Customize

#2.1. To change it to Youtube, you can change Line 04 & Line 07 to something like this

• Line 04: loaderType: ‘youtube’,
• Line 07: loaderVideoUrl: ‘https://www.youtube.com/watch?v=w4GeicVR_fQ’,

<script>
var splashOptions = {
  loaderType: 'youtube', /* text, image, youtube, vimeo, hosted */
  loaderTitle: '@tuanphan',
  loaderImage: 'https://images.squarespace-cdn.com/content/v1/68985bba91a8d8273678b74b/1756781989765-M8DG7RMYNS5MWC7CVLKM/unsplash-image-igKjieyjcko.jpg?format=1500w',
  loaderVideoUrl: 'https://www.youtube.com/watch?v=w4GeicVR_fQ',
  loaderVideoMute: true, /* true = always muted, false = show unmute button */
  loaderAdditionalDelay: 5000,
  loaderFadeTime: 1000,
  showLoaderOnlyOnce: false,
  overlayColor: '#fff',
  titleColor: '#000',
  titleSize: '95px',
  titleMobileSize: '48px',
  imageHeight: '55px',
  imageMobileHeight: '35px',
  exitAnimation: 'fade', /* fade, slideLeft, slideRight, slideUp, slideDown */
  redirectEnabled: false,
  redirectUrl: '/'
}
</script>

#2.2. To change video to Uploaded Video, change Line 04 & Line 07 to something like this

• Line 04: loaderType: ‘hosted’,
• Line 07: loaderVideoUrl: ‘https://tuanphan-demo.squarespace.com/s/SunFlower.mp4’,

<script>
var splashOptions = {
  loaderType: 'hosted', /* text, image, youtube, vimeo, hosted */
  loaderTitle: '@tuanphan',
  loaderImage: 'https://images.squarespace-cdn.com/content/v1/68985bba91a8d8273678b74b/1756781989765-M8DG7RMYNS5MWC7CVLKM/unsplash-image-igKjieyjcko.jpg?format=1500w',
  loaderVideoUrl: 'https://tuanphan-demo.squarespace.com/s/SunFlower.mp4',
  loaderVideoMute: true, /* true = always muted, false = show unmute button */
  loaderAdditionalDelay: 5000,
  loaderFadeTime: 1000,
  showLoaderOnlyOnce: false,
  overlayColor: '#fff',
  titleColor: '#000',
  titleSize: '95px',
  titleMobileSize: '48px',
  imageHeight: '55px',
  imageMobileHeight: '35px',
  exitAnimation: 'fade', /* fade, slideLeft, slideRight, slideUp, slideDown */
  redirectEnabled: false,
  redirectUrl: '/'
}
</script>

#2.3. If you want to redirect new page after video finish playing, you can change Line 19, Line 20

redirectEnabled: false,
redirectUrl: '/'

#2.4. If you want the Loading Screen to only display once and not reappear. You can change Line 11

showLoaderOnlyOnce: false,

to

showLoaderOnlyOnce: true,

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can edit Site Footer

Add a Block

Choose Markdown

Paste this code into Markdown

<script>
var splashOptions = {
  loaderType: 'vimeo', /* text, image, youtube, vimeo, hosted */
  loaderTitle: '@tuanphan',
  loaderImage: 'https://images.squarespace-cdn.com/content/v1/68985bba91a8d8273678b74b/1756781989765-M8DG7RMYNS5MWC7CVLKM/unsplash-image-igKjieyjcko.jpg?format=1500w',
  loaderVideoUrl: 'https://vimeo.com/222842052',
  loaderVideoMute: true, /* true = always muted, false = show unmute button */
  loaderAdditionalDelay: 5000,
  loaderFadeTime: 1000,
  showLoaderOnlyOnce: false,
  overlayColor: '#fff',
  titleColor: '#000',
  titleSize: '95px',
  titleMobileSize: '48px',
  imageHeight: '55px',
  imageMobileHeight: '35px',
  exitAnimation: 'fade', /* fade, slideLeft, slideRight, slideUp, slideDown */
  redirectEnabled: false,
  redirectUrl: '/'
}
</script>
<script src="https://code.beaverhero.com/other/0626c08v2videoloadingscreen.js"></script>

#3.2. To make Loading Screen effect on One Page only, you can hover on Page Name > Click Gear icon

Next, click Advanced > Paste the code

<!-- 06.26c08v2 Video Loading Screen -->
<script>
var splashOptions = {
  loaderType: 'vimeo', /* text, image, youtube, vimeo, hosted */
  loaderTitle: '@tuanphan',
  loaderImage: 'https://images.squarespace-cdn.com/content/v1/68985bba91a8d8273678b74b/1756781989765-M8DG7RMYNS5MWC7CVLKM/unsplash-image-igKjieyjcko.jpg?format=1500w',
  loaderVideoUrl: 'https://vimeo.com/222842052',
  loaderVideoMute: true, /* true = always muted, false = show unmute button */
  loaderAdditionalDelay: 5000,
  loaderFadeTime: 1000,
  showLoaderOnlyOnce: false,
  overlayColor: '#fff',
  titleColor: '#000',
  titleSize: '95px',
  titleMobileSize: '48px',
  imageHeight: '55px',
  imageMobileHeight: '35px',
  exitAnimation: 'fade', /* fade, slideLeft, slideRight, slideUp, slideDown */
  redirectEnabled: false,
  redirectUrl: '/'
}
</script>
<script src="https://code.beaverhero.com/other/0626c08v2videoloadingscreen.js"></script>