Before-After Video (v2.Click)

Demo: https://tuanphan-demo01.squarespace.com/click-text-show-video?noredirect

Password: abc

Suppose you have 2 Texts.

You want: when users click on each Text > Show Video Block.

#1. First, you add a Text Block with some text/url.

Make sure the option “Open link in new tab” is disabled

• #before
• #after

and 2 Video Blocks below.

#2. Install Squarespace ID Finder to find the ID of the Image Block.

In my example, we will have:

• Left video: #block-yui_3_17_2_1_1714637665132_14595
• Right video: #block-yui_3_17_2_1_1714637665132_15025

#3. Use code to Code Injection – Footer (or Page Header Code Injection)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // Before
  $("#block-yui_3_17_2_1_1714637665132_14595").closest('.fe-block').addClass('before show');
  // After
$("#block-yui_3_17_2_1_1714637665132_15025").closest('.fe-block').addClass('after');
  
  // Before
  $('a[href="#before"]').click(function(){
    $(".before").addClass("show");
    $('.fe-block:not(.before)').removeClass('show');
    }
  );
// After
 $('a[href="#after"]').click(function(){
   $(".after").addClass("show");
    $('.fe-block:not(.after)').removeClass('show');
    }
  );
});
</script>
<style>
.before .video-block, .after .video-block {
    display: none;
}
  .show .video-block {
      display: block !important;
  }
  .show {
      z-index: 999999 !important;
  }
</style>

#4. Explain code