# How to Create Video Lightbox Popup?

**URL:** <https://community.hubspot.com/t/how-to-create-video-lightbox-popup/10469>\
**Category:** CMS Development\
**Created:** [October 4, 2018, 4:04pm UTC](https://community.hubspot.com/t/how-to-create-video-lightbox-popup/10469 "2018-10-04T16:04:04Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![JJ\_Anderson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jj_anderson/32/33328_2.png) [@JJ\_Anderson](https://community.hubspot.com/u/JJ_Anderson)\
**Post date:** [October 4, 2018, 4:04pm UTC](https://community.hubspot.com/t/how-to-create-video-lightbox-popup/10469/1 "2018-10-04T16:04:04Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [October 5, 2018, 6:57am UTC](https://community.hubspot.com/t/how-to-create-video-lightbox-popup/10469/2 "2018-10-05T06:57:01Z")

</div>

HI [@JJ\_Anderson](https://community.hubspot.com/t5/user/viewprofilepage/user-id/67520)

try this one from [Codepen](https://codepen.io/grayghostvisuals/pen/eroxg)

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

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

```

- for the JS part

```auto
<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)

```auto
$('#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 Code[Pen](https://codepen.io/mattamyot/pen/dMGwyK) .

hope this helps

regards

Anton

---

<div class="post-metadata">

**Author:** ![willnz21](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/willnz21/32/52876_2.png) [@willnz21](https://community.hubspot.com/u/willnz21)\
**Post date:** [March 17, 2022, 8:16pm UTC](https://community.hubspot.com/t/how-to-create-video-lightbox-popup/10469/3 "2022-03-17T20:16:04Z")

</div>

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://jsonformatter.org/scss-to-css)

> **[SASS to CSS Converter Online](https://codebeautify.org/sass-to-css-converter)**
>
> Online SASS to CSS converter to convert SASS string to CSS. Save and Share SASS to CSS. Simple Quick and Fast!

> **[SCSS to CSS Compiler - CSS Portal](https://www.cssportal.com/scss-to-css/)**
>
> This online tool will compile your SCSS code into CSS code. SCSS which stands for 'Sassy CSS' is a CSS Preprocessors.

---

<div class="post-metadata">

**Author:** ![jessebeginbound](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jessebeginbound/32/106254_2.png) [@jessebeginbound](https://community.hubspot.com/u/jessebeginbound)\
**Post date:** [April 25, 2019, 4:28pm UTC](https://community.hubspot.com/t/how-to-create-video-lightbox-popup/10469/4 "2019-04-25T16:28:03Z")

</div>

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](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](https://marketplace.hubspot.com/products/begin-bound/beginbound-video-upnext-carousel-live)

Happy HubSpotting!

---

<div class="post-metadata">

**Author:** ![mariekewest](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mariekewest/32/59606_2.png) [@mariekewest](https://community.hubspot.com/u/mariekewest)\
**Post date:** [August 26, 2021, 1:26pm UTC](https://community.hubspot.com/t/how-to-create-video-lightbox-popup/10469/5 "2021-08-26T13:26:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![NKavanaugh](https://avatars.discourse-cdn.com/v4/letter/n/f17d59/32.png) [@NKavanaugh](https://community.hubspot.com/u/NKavanaugh)\
**Post date:** [December 6, 2022, 9:58pm UTC](https://community.hubspot.com/t/how-to-create-video-lightbox-popup/10469/6 "2022-12-06T21:58:07Z")

</div>

Hi, your link is dead.