Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Playing Background videos while overing with cursor


Recommended Posts

Site URL: https://marcotronconi.com/

Hello there, 

I'm new into coding. In my website https://marcotronconi.com/ I would like to add a line of code that plays the thumbnail video (see the upper first thumbnail) only when overing with cursor and returns as a static image when not overing. (similar to the current youtube thumbnail experience..)
The url for the YT video is https://youtu.be/rZBLXaa4cgw

The media (so the url) is pasted in: Page setting> media 
Will the code be injected in page settings > advance / or /  as a "code" content block inside the interested page?

I have the personal plan, so i can only use css. 

Thanks a lot, and greetings from Italy,
Marco

Link to post
  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

You can't control gifs either, but you can set the figure's background to a gif and hide/show the static image on hover.

OK, I was finally able to figure this out with youtubes API. I have a client that requested something similar, so I had to really get into this...... https://codepen.io/r-w-p/pen/KKzeVmb

You can't.

Squarespace will not allow video uploads directly, and you can not control what is inside an iframe with code from your site.

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post

You can't control gifs either, but you can set the figure's background to a gif and hide/show the static image on hover.

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post

@rwp

 

Here's a YT tutorial  similar to what i need to achieve. The biggest difference is that i need to put static image and gif as thumbnail of a page, so exterior from the page itself (see https://marcotronconi.com/ thumbnail I am reffering to are the "cover images" form the clickable page)  Where should i code inject? From design > custom Css / or / as a "code" content block inside the interested page?

Thanks

Link to post
  • 4 weeks later...

Any movement on this? Seems like it would be simple enough to add a button 'play on mouse over' where you insert the youtube/vimeo url.... THANKS IN ADVANCE SQUARESPACE

Link to post

OK, I was finally able to figure this out with youtubes API.

I have a client that requested something similar, so I had to really get into this......

https://codepen.io/r-w-p/pen/KKzeVmb

Currently not working 100% in firefox, you have to click play to get it to start working. Not sure whats up with that yet.

Edit: fixed on firefox...... I hope.....

Edited by rwp

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
On 9/13/2020 at 12:56 PM, rwp said:

OK, I was finally able to figure this out with youtubes API.

I have a client that requested something similar, so I had to really get into this......

https://codepen.io/r-w-p/pen/KKzeVmb

Currently not working 100% in firefox, you have to click play to get it to start working. Not sure whats up with that yet.

Edit: fixed on firefox...... I hope.....

eh... shows a play button and when mouse isn't over it shows 'other videos' etc. Not very visually appealing.

Link to post
3 minutes ago, baxley said:

eh... shows a play button and when mouse isn't over it shows 'other videos' etc. Not very visually appealing.

Those are limitations of the YouTube API.

Squarespace will not let you host videos, short of setting up your own hosting, that's about what we are limited to.

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...