How to Create Video Lightbox Popup?

Develop, Build & Integrate CMS Development
1

Hello, I’d like to create a video lightbox popup to be triggered by an image thumbnail of the video. Does anyone have template code/instructions? Thanks in advance! FYI trying to find something free, don’t want to pay $100/month for Wistia, etc.

2

HI @JJ_Anderson

try this one from Codepen

If you build a custom module(which I highly recommend)

you can paste everything into the “HTML+Hubl” Box into the right “brackets”

- for the html you’ll need none

- for the css(you have to convert the scss to css first) use

<style>
/* Your code goes here */
</style>

- for the JS part

<script>
// Your code goes here

</script>

when you do this you can replace the URL part(found in the JS part of the codepen code)

$('#gd-video').attr(
		'src',
		'https://player.vimeo.com/video/214092083'
	);

with a text widget. After that you can place the module everywhere you want/need and drop any vimeo link in it without needing any coding skills.

For youtube videos go with this CodePen .

hope this helps

regards

Anton

3

Hi Anton,

Thank you for your solution. Do you have a suggested source to convert SCSSto CSS on your given CodePen example? I have tried a few but the solution no longer works after converting it.

I have tried these sources

Codepen has the feature to view complied CSS which isn’t working.

https://jsonformatter.org/scss-to-css

4

Hi, JJ!

There are some great responses here, but I wanted to let you know that if you tired of trying to mess with the code, we did build a HubSpot Custom Module that is available int he HubSpot Marketing place that will handle this for you.

The BeginBound YouTube Vimeo Video Popup allows you to use any public YouTube or Vimeo video in it and it will create a nice popup for you. No coding required at all.

It’s only $15 and if you want to learn more, check it out on the Marketplace here:

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

We also have another module if you need to list several videos in a carousel and uses the same great popup features here: https://marketplace.hubspot.com/products/begin-bound/beginbound-video-upnext-carousel-live

Happy HubSpotting!

5

Hi, Is it true that this BeginBound YouTube Vimeo Video Popup is no longer available?

6

Hi, your link is dead.