Click button – Show Video

Demo: https://tuanphan3.squarespace.com/click-button-show-video?noredirect
Password: abc

Suppose you have 4 buttons (left) – 4 videos (right).
When clicking on each button, will show corresponding videos on the right.
You can follow these steps:
#1. First, add 4 Button Blocks and 4 Videos

#2. Edit 4 Button Blocks, and use these URLs

#apple
#microsoft
#instagram
#google

and make sure the option “Open Link in New Tab” is disabled.

#3. Install Squarespace ID Finder to find the ID of Videos

In my example, we will have:

Apple video: #block-732e624b177ec3a83b6f
Microsoft video: #block-a5fea4b81434f2b85321
Instagram video: #block-c102931f3c45b5a452c2
Google video: #block-e71c8b0bee39e662e11f

#4. 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(){
  // Apple
  $("#block-732e624b177ec3a83b6f").closest('.fe-block').addClass('apple show');
  // Microsoft
$("#block-a5fea4b81434f2b85321").closest('.fe-block').addClass('microsoft');
  // Instagram
$("#block-c102931f3c45b5a452c2").closest('.fe-block').addClass('instagram');
  // Google
$("#block-e71c8b0bee39e662e11f").closest('.fe-block').addClass('google');
  
  // Apple
  $('a[href="#apple"]').click(function(){
    $(".apple").addClass("show");
    $('.fe-block:not(.apple)').removeClass('show');
    }
  );
// Microsoft
 $('a[href="#microsoft"]').click(function(){
   $(".microsoft").addClass("show");
    $('.fe-block:not(.microsoft)').removeClass('show');
    }
  );
  // Instagram
 $('a[href="#instagram"]').click(function(){
   $(".instagram").addClass("show");
    $('.fe-block:not(.instagram)').removeClass('show');
    }
  );
  // Google
   $('a[href="#google"]').click(function(){
   $(".google").addClass("show");
    $('.fe-block:not(.google)').removeClass('show');
    }
  );
});
</script>
<style>
.apple .video-block, .microsoft .form-block, .instagram .video-block, .google .video-block {
    display: none;
}
  .show .video-block {
      display: block !important;
  }
  .show {
      z-index: 999999 !important;
  }
</style>

Ask me a question, free