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