Change background of section 7.1 when hovering over text

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!

Hi. Sorry for the delay. Have you found the solution yet?

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

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>

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

On 4/13/2021 at 1:46 AM, kcreative said:

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

Answered your message