Jump to content

Change background of section 7.1 when hovering over text

Recommended Posts

Site URL: http://https/pyramide.squarespace.com

Hi Everyone! I am looking to have the background video of a section change as you hover over different text. I am setting this up using side by side split sections with the hope of achieving something like the portfolio page but with videos and more customize.

@tuanphan I think you have solved some other issues like this prior and would love your help/ expertise!

 

 

 

Link to comment
  • Replies 5
  • Views 497
  • Created
  • Last Reply

I have not! I'd still love some assistance. 

Essentially looking to have a different video play in the section to the right when you hover over  "Live Action" and "Animation" The video is currently set as the section background of the right side. 

http://https/pyramide.squarespace.com

Pass: PP2021!

Thank you!

@tuanphan

Link to comment
On 4/7/2021 at 4:42 AM, kcreative said:

I have not! I'd still love some assistance. 

Essentially looking to have a different video play in the section to the right when you hover over  "Live Action" and "Animation" The video is currently set as the section background of the right side. 

http://https/pyramide.squarespace.com

Pass: PP2021!

Thank you!

@tuanphan

Try adding to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		  // Live action
  $('div#block-yui_3_17_2_1_1617133143937_13083 a').hover(
       function(){ $('[data-section-id="6062ba850e9c196a6b99e881"] .content-fill').attr('data-config-url', 'https://vimeo.com/528026507/32bd52d504') }
)
  // Animation
  $('div#block-yui_3_17_2_1_1617134589949_5687 a').hover(
        function(){ $('[data-section-id="6062ba850e9c196a6b99e881"] .content-fill').attr('data-config-url', 'https://www.youtube.com/watch?v=Rb0UmrCXxVA') }
)
	});
</script>

 

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
15 hours ago, tuanphan said:

Try adding to Settings > Advanced > Code Injection > Footer


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		  // Live action
  $('div#block-yui_3_17_2_1_1617133143937_13083 a').hover(
       function(){ $('[data-section-id="6062ba850e9c196a6b99e881"] .content-fill').attr('data-config-url', 'https://vimeo.com/528026507/32bd52d504') }
)
  // Animation
  $('div#block-yui_3_17_2_1_1617134589949_5687 a').hover(
        function(){ $('[data-section-id="6062ba850e9c196a6b99e881"] .content-fill').attr('data-config-url', 'https://www.youtube.com/watch?v=Rb0UmrCXxVA') }
)
	});
</script>

 

Thank you! I am still having some issues - I sent you a direct email to see if we can connect further. Thank you again! 

@tuanphan

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.