How to add a Pop Up Video?

Developer Support CMS Development
1

Hi there,

I want to add a pop-up video to my landing page. When someone clicks on it, it should play video in a pop-up on the same page.

Can anyone suggest how to do this?

Thanks

2

Hi @lucas2
Can you please let me know which Video provide you are using, you need some knowledge of coding because it required some Jquery.
Follow this link https://codepen.io/bgold/pen/WxppOq
Create on custom module add the following code and replace the URL with your video URL.
Or
if you want to use a Module like
this Homepage with Background video ( PsdtoHubspot )
Please Let me know will install it in your portal.

26914i2C750ADEC1943BDF.png
26914i2C750ADEC1943BDF.png999×476 137 KB

Let me know if you want me to do it on your portal!
Thanks!
Ajit.

3

Hi @psdtohubspot

Thanks for the reply. Both Solutions looks good to me but I am happy if I can use your module, can send me some more information, sending you DM.
And Accepting this solution

4

Hi Ajit,

I’ve got the codepen code working thanks to your great solution. However, I wish to play the video off of a CTA click. I’ve tried making the module a CTA field but when I attach the desired CTA the CTA doesn’t show up. Do you by any chance know how I can display the CTA → Click → Popup Video?

5

Hi @lucas2!

No problem! We actually created two HubSpot CMS Modules that you can use very easily to solve this problem. You can use these with any HubSpot Template or Page, no coding required! Check them out and let me know if that helps!

BeginBound YouTube Vimeo Video Popup

A simple module that will allow you to put ANY YouTube or Vimeo video in a beautiful, responsive popup for your HubSpot web pages and landing pages.

https://marketplace.hubspot.com/products/begin-bound/beginbound-youtube-vimeo-popup

BeginBound Video UpNext Carousel

Same popup/tech as above, BUT it lets you display an unlimited series of videos in a beautiful video carousel that automatically previews the next video in the series.

https://marketplace.hubspot.com/products/begin-bound/beginbound-video-upnext-carousel-live