topic Re: Change Video play icon on Custom Module in CMS Development

Change Video play icon on Custom Module

sariyanta — Tue, 02 Aug 2022 13:22:22 GMT

Hi there,

I'm still new here, please go easy on me :).

I'm creating a custom module which has a video field.

For some reason, I cannot find a way to change the play icon in the video. Is there a way to override this button?

I have tried doing it via css but it didn't work. Using javascript also didn't work because of the CORS issue since the iframe domain is different than the page itself.

here is the icon that I wanted to change:

Original Play Icon

This is what I'm aiming at:

Custom Play Icon

Thank you in advanced.

Sariyanta

Re: Change Video play icon on Custom Module

Jaycee_Lewis — Tue, 02 Aug 2022 23:30:25 GMT

Hi, @sariyanta 👋 Welcome to the community! Let's see if we can get the conversation started — hey @Jnix284 @Stephanie-OG @LMeert have you managed to edit the “play” button in a video module? Or a similar type of customization?

Thank you! — Jaycee

Re: Change Video play icon on Custom Module

Jnix284 — Tue, 02 Aug 2022 23:54:57 GMT

Hi @sariyanta, happy to help, we're all learning here! Yes, it is possible, I wouldn't be able to help point you in the right direction without seeing how the module is coded. I don't have as much experience building the modules as I do modifying them. I bet @Stephanie-OG will have a much quicker answer for you 🙂

Re: Change Video play icon on Custom Module

sariyanta — Wed, 03 Aug 2022 09:30:31 GMT

Thank you! I hope @Stephanie-OG could give me some pointers 🙂

Re: Change Video play icon on Custom Module

sariyanta — Wed, 03 Aug 2022 09:31:12 GMT

Thanks @Jaycee_Lewis ! I hope they can share their solution on the play button in the video module 🙂

Re: Change Video play icon on Custom Module

albertsg — Wed, 03 Aug 2022 16:06:39 GMT

Hi @sariyanta, I'm not sure if it's possible to change the styles of the play button if it comes from an iframe. You would need to change it on the original url, but if it's a third party service I don't think you will be able to do it (unless they offer customization options).

One thing you could do is to create an image with your desired play button that on click will open your video in a modal element, something like this.

Hope this helps 🙂

Re: Change Video play icon on Custom Module

Jaycee_Lewis — Wed, 03 Aug 2022 17:05:02 GMT

Brilliant idea, @albertsg I didn't think of creating a custom thumbnail image 💡

Thank you! — Jaycee

Re: Change Video play icon on Custom Module

LMeert — Thu, 04 Aug 2022 06:57:34 GMT

Hi @sariyanta,

If you want to use a native HubSpot video field, as @albertsg said this looks like it's not possible since it's an iframe and you don't have access to the css/js files of that page.

I second the method of having a custom image + play button (could be added on top as CSS even, not necessarily included in the thumbnail this way you can add a :hover state to your button).

However, I've found out that the HubSpot video player makes the page load way slower, and in an effort to optimize the page speed, I've used this lightweight youtube embed plugin.
You can find the demonstration codepen here.

It works wonders, is very light to set up, customize and youtube analytics will give you plenty of free playback insights.

Hope this helps !

Ludwig

Re: Change Video play icon on Custom Module

sariyanta — Thu, 04 Aug 2022 06:59:50 GMT

Hi @albertsg, thank you for the pointer.
This iframe is generated by the HubSpot's own video module.

I thought there would be a way to modify it.

If I check the code for the video module on @hubspot/video.module, I see a hardcoded svg:

{% if module.oembed_thumbnail.src %} <button class="oembed_custom-thumbnail" style="background-image:url({{module.oembed_thumbnail.src}})"> <span class="oembed-info">Video player - {{ module.oembed_thumbnail.alt }} - Click to play video</span> <div class="oembed_custom-thumbnail_icon"> <svg viewBox="0 0 135.39 149.4"><path d="M371.2,398.69l-127.79,71c-1.47.83-2.74.93-3.8.28a3.69,3.69,0,0,1-1.59-3.46V324.88a3.73,3.73,0,0,1,1.59-3.47,3.66,3.66,0,0,1,3.8.29l127.79,71c1.47.84,2.21,1.82,2.21,3S372.67,397.85,371.2,398.69Z" transform="translate(-238.02 -321)"></path></svg> </div> </button> {% endif %}

I was wondering how to override this.

Best regards,

Sariyanta

Re: Change Video play icon on Custom Module

albertsg — Thu, 04 Aug 2022 08:34:54 GMT

Hi @sariyanta, another idea that just came to my mind (I didn't test this) is to clone the @hubspot/video module and create your own video module.

Your new cloned module should behave the same way as the original one but you will be able to edit all the properties in HTML, CSS and JS.

Give it a try, it might work 🙂

Re: Change Video play icon on Custom Module

sariyanta — Fri, 05 Aug 2022 08:58:03 GMT

I will try this and report back here if it works.

My only concern with this is that when creating custom module that has video field in it, I couldn't use it.

But let's see.

Re: Change Video play icon on Custom Module

Jnix284 — Fri, 05 Aug 2022 11:18:16 GMT

@sariyanta I didn't realize you were referring to the HubSpot standard module previously. Here's an example of a custom video module styled with different layouts and buttons.

Re: Change Video play icon on Custom Module

sariyanta — Mon, 08 Aug 2022 08:26:35 GMT

Hi @Jnix284,

Thank you for the pointer. I see that the video is played in a pop-up on all the examples, and they are played automatically. Perhaps we will try something similar on our project.

Re: Change Video play icon on Custom Module

Stephanie-OG — Mon, 08 Aug 2022 11:20:09 GMT

Apologies @sariyanta - I was out of the office!

As others have said, I don't think you can edit HubSpot's own video module. In the past, when I've created a custom video module I've used a custom module with a "File" field to select the video.

Then I add in the button using HTML, absolute position it in the center of the video using CSS and use JavaScript so that clicking on it will hide the button/play the video.

Stephanie O'Gay Garcia

Freelance HubSpot CMS Developer

Website | Contact