CMS Development

JJ_Anderson
Participant

How to Create Video Lightbox Popup?

SOLVE

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.

1 Accepted solution
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

How to Create Video Lightbox Popup?

SOLVE

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

Anton Bujanowski Signature

View solution in original post

5 Replies 5
jessebeginbound
Participant | Platinum Partner
Participant | Platinum Partner

How to Create Video Lightbox Popup?

SOLVE

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!

0 Upvotes
NKavanaugh
Participant

How to Create Video Lightbox Popup?

SOLVE

Hi, your link is dead.

0 Upvotes
mariekewest
Contributor | Diamond Partner
Contributor | Diamond Partner

How to Create Video Lightbox Popup?

SOLVE

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

0 Upvotes
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

How to Create Video Lightbox Popup?

SOLVE

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

Anton Bujanowski Signature
willnz21
Participant

How to Create Video Lightbox Popup?

SOLVE

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

https://codebeautify.org/sass-to-css-converter

https://www.cssportal.com/scss-to-css/

 

 

0 Upvotes