topic Re: How to Create Video Lightbox Popup? in CMS Development

How to Create Video Lightbox Popup?

JJ_Anderson — Thu, 04 Oct 2018 16:04:04 GMT

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.

Re: How to Create Video Lightbox Popup?

Anton — Fri, 05 Oct 2018 06:57:01 GMT

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

Re: How to Create Video Lightbox Popup?

jessebeginbound — Mon, 01 Jun 2020 18:18:57 GMT

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!

Re: How to Create Video Lightbox Popup?

mariekewest — Thu, 26 Aug 2021 13:26:06 GMT

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

Re: How to Create Video Lightbox Popup?

willnz21 — Thu, 17 Mar 2022 20:16:04 GMT

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/

Re: How to Create Video Lightbox Popup?

NKavanaugh — Tue, 06 Dec 2022 21:58:07 GMT

Hi, your link is dead.