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

Description

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

video1-min.thumb.png.8eb75358f49f87740e68cd6749205004.png

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

image.thumb.png.32b5dd3eab1612fbb5dfa750c73a2c8e.png

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

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

video3.thumb.jpg.2a8b07d90b153e210263eb5d9e75b316.jpg

#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

image.thumb.png.e8c3ad9c44bb788e8ce85f4ca4d3ae07.png

#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>
<script>
$(document).ready(function(){
  // Apple
  $('.button-block a[href="#apple"]').click(function(){
    $("#block-732e624b177ec3a83b6f").addClass("show");
$('div:not(#block-732e624b177ec3a83b6f)').removeClass('show');
    }
  );
// Microsoft
 $('.button-block a[href="#microsoft"]').click(function(){
    $("#block-a5fea4b81434f2b85321").addClass("show");
$('div:not(#block-a5fea4b81434f2b85321)').removeClass('show');
    }
  );
  // Facebook 
   $('.button-block a[href="#facebook"]').click(function(){
    $("#block-c102931f3c45b5a452c2").addClass("show");
$('div:not(#block-c102931f3c45b5a452c2)').removeClass('show');
    }
  );
 // Google
  $('.button-block a[href="#google"]').click(function(){
    $("#block-e71c8b0bee39e662e11f").addClass("show");
$('div:not(#block-e71c8b0bee39e662e11f)').removeClass('show');
    }
  );
});
</script>
<style>
#block-732e624b177ec3a83b6f, #block-a5fea4b81434f2b85321, #block-c102931f3c45b5a452c2, #block-e71c8b0bee39e662e11f {
  opacity: 0;
  transition: all 0.1s ease;
  }
  .show {
  opacity: 1 !important;
     transition: all 0.1s ease;
  }
</style>

image.thumb.png.a431345e2a99e7b97509d065bbb4429a.png

#5. Explain some code

image.thumb.png.f7e799d022d57d5e4a5a825f49b0cb92.png

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.