Jump to content

[Share] Click Button - Show Video

Recommended Posts

(If you can't make it work, you can share link to page where you added videos/buttons, I can check easier)

Demo: https://tuanphan3.squarespace.com/hover-image-show-video-2?noredirect

Pass: abc


  • Click button (left) >> Show corresponding Video (right)


Suppose you have 4 buttons (left) - 4 videos (right).

When clicking on each button, will show corresponding videos on right. You can follow these steps

#1. First, add 4 Button Blocks and 4 Videos


#2. Edit 4 Button Blocks, and use these urls
* #google
* #apple
* #microsoft
* #instagram

and make sure option "Open Link in New Tab" disabled.


#3. Install Squarespace ID Finder: https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

to find ID of Buttons and Videos.

In my example, we will have

  •  Google: #block-yui_3_17_2_1_1709889936772_26892
  • Apple: #block-yui_3_17_2_1_1709889936772_28872
  • Microsoft: #block-yui_3_17_2_1_1709889936772_30045
  • Instagram: #block-yui_3_17_2_1_1709889936772_31727
  • Video 01: #block-732e624b177ec3a83b6f
  • Video 02: #block-a5fea4b81434f2b85321
  • Video 03: #block-c102931f3c45b5a452c2
  • Video 04: #block-e71c8b0bee39e662e11f


#4. Use code to Website > Website Tools > Code Injection > Footer (or Page Header Code Injection)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
  // Apple
  $('.button-block a[href="#apple"]').click(function(){
// Microsoft
 $('.button-block a[href="#microsoft"]').click(function(){
  // Facebook 
   $('.button-block a[href="#facebook"]').click(function(){
 // Google
  $('.button-block a[href="#google"]').click(function(){
#block-732e624b177ec3a83b6f, #block-a5fea4b81434f2b85321, #block-c102931f3c45b5a452c2, #block-e71c8b0bee39e662e11f {
  opacity: 0;
  transition: all 0.1s ease;
  .show {
  opacity: 1 !important;
     transition: all 0.1s ease;


#5. Explain some code


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Replies 0
  • Views 965
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.