Jump to content

Playing a video only by clicking on the play button instead of anywhere in the screen

Recommended Posts

I'm working out of the Carson template, which automatically adds a play button over the video when you add a gallery page, which is great. But the only problem is that you can click anywhere over the video to play it, which means you can't click on the linked text I have in the video description. It would be great if you had options to click on both the video to watch the trailer, or the link to the entire film which sends you to a different page like Peacock. Attached is a great example. Squarespace advised what I already knew, you have to place the text below the video, which I don't dig aesthetically. Any coding for this?

Screen Shot 2023-04-13 at 4.31.26 PM.png

Link to comment
  • Replies 8
  • Views 3.1k
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...

Add to Design > Custom CSS

/* make text links clickable */
.collection-type-gallery.tweak-show-gallery-image-captions-always .grid-item-wrapper .grid-image-wrapper .image-title-desc {
    z-index: 123456789 !important;
    pointer-events: auto !important;


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

FYI, it's not working for me. You can click on the links in the description, but it just plays the video, and if you click on the screen anywhere it still plays the video. Ideally I would have code to set it for just hitting the play button to play the video, like this person has on their website: https://www.darrenlew.com/work/.

I have kept the code up for now, but let me know if it's easier if I make you an administrator and I'll let you try a few things to see if it works. Happy to leave a tip too if you can figure it out. Thanks for your help and time!

Link to comment

I'm seeing a lot of links for hover effect codes, but can't seem to find this in another thread. Any suggestions on what I should use to search for it? I also searched "text links clickable" and couldn't find it there either. Also happy to give you access to my page if it helps so you can experiment with it.

Someone at Squarespace said, "It may be helpful for that forum thread to clarify which template your site is using and also which font you are using. If not for the user who has reached out to you to suggest a different snippet of code (if they have the time and are interesting in helping), but also to help other users who then search the thread later." So I wanted to note that I am using the Carson template (already mentioned), and the font is Adobe Handwriting Ernie for this thread:

 Let me know if there's another code I can try for the "make text links clickable" which I do like as a solve as opposed to having to play on the play button only.  . .but either would work for me and would solve my problem of those links not being clickable. 

FYI, waiting to send you some cash until this is solved or unsolved as I'll give a little more if we can fix this problem. Thanks!

Edited by scottdrucker13
Link to comment
  • 4 months later...

I totally get your point! Having the flexibility to click on either the video or a specific link within the video description can enhance user experience and engagement.

In the context of PikaShow, it would be awesome to implement a feature that lets viewers choose whether they want to play the video by clicking on the play button or by clicking on a relevant link within the description. This way, users can seamlessly access more information or related content without compromising aesthetics.

As for the coding aspect, it might require some custom JavaScript to achieve this functionality. You'd likely need to modify the existing code associated with the video player to differentiate between a click on the play button and a click elsewhere on the video. It's definitely doable, but it might require some technical know-how or the help of a developer...

Edited by ivanacoy
Link to comment

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.