# Custom Play Button for Video

**URL:** <https://forum.readymag.com/t/custom-play-button-for-video/3192>\
**Category:** Custom code\
**Created:** [July 3, 2024, 2:33pm UTC](https://forum.readymag.com/t/custom-play-button-for-video/3192 "2024-07-03T14:33:36Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mel\_S\_108](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/mel_s_108/32/1930_2.png) [@Mel\_S\_108](https://forum.readymag.com/u/Mel_S_108)\
**Post date:** [July 3, 2024, 2:33pm UTC](https://forum.readymag.com/t/custom-play-button-for-video/3192/1 "2024-07-03T14:33:36Z")

</div>

Hi all.  
Trying to make a video portfolio page and when I place the video in the page the play button takes over the size of the thumbnail.

Anyone help me with custom code to change the play button? I haven’t seen any successful code on the forum.

Thanks!

 ![Screenshot 2024-07-03 at 8.29.33 AM](https://us1.discourse-cdn.com/flex015/uploads/readymag/original/2X/1/1672d59f30674fec57a9a8972089f42aa940be36.jpeg)

---

<div class="post-metadata">

**Author:** ![Samus](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/samus/32/1146_2.png) [@Samus](https://forum.readymag.com/u/Samus)\
**Post date:** [July 5, 2024, 12:57am UTC](https://forum.readymag.com/t/custom-play-button-for-video/3192/2 "2024-07-05T00:57:11Z")

</div>

The ‘no code’ route would be to upload your own thumbnail (using Picture-w) and place it on top of your video. Next, add click opacity animation to the video, make the image the trigger.

Lastly, add another click animation, this time to the image itself, make it go opacity 0 when clicked.

---

<div class="post-metadata">

**Author:** ![Ky\_Lee](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/ky_lee/32/2830_2.png) [@Ky\_Lee](https://forum.readymag.com/u/Ky_Lee)\
**Post date:** [January 15, 2025, 10:05pm UTC](https://forum.readymag.com/t/custom-play-button-for-video/3192/4 "2025-01-15T22:05:15Z")

</div>

Hey samus, this was quite a great suggestion to make a ‘diy lightbox’. Is there a way to ‘exit’ out the animated video window so it goes back to that initial picture? I’m building out my portfolio now and I have multiple pictures on one page and I’d like for the picture click to have a video pop up and when audience click elsewhere for it to close down so they can look around the rest - if that makes sense. I’m not on a paid version right now so wondering if that’s the issue. I’m planning on to once my squarespace sub is out.

---

<div class="post-metadata">

**Author:** ![Samus](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/samus/32/1146_2.png) [@Samus](https://forum.readymag.com/u/Samus)\
**Post date:** [January 16, 2025, 4:04pm UTC](https://forum.readymag.com/t/custom-play-button-for-video/3192/5 "2025-01-16T16:04:15Z")

</div>

Have not tried it but sounds fairly easy to achieve.

> [@Ky\_Lee](#):
>
> for the picture click to have a video pop up and when audience click elsewhere for it to close down so they can look around the rest

Try adding a big shape as the background of the ‘lightbox’ and set it as another trigger for the animation. This way, when clicked, it will revert the animation to the initial state.