Video popup module to hero-banner

[tette_engage]

Let's start with first things first:

http://www.prometheusone.io/home?hs_preview=uRfEWnnD-6144333362

I would like to use the 'Watch video' feature in the banner. Another module (before the pricings) has a functioning button which opens the video in a popup, but we feel it would work better in the banner. I tried creating the button itself (currently visible, but not center-aligned) but I have problems creating the commands for when a user clicks the button.

Simply put: how do I transfer the video-popup from one module to my banner?

[tjoyce]

@tette_engage - the page is PW protected.

[tette_engage]

Should be fixed now 🙂

[tjoyce · Accepted solution]

@tette_engage - You can drop this javascript in the footer of your page - 

<script>
$(function(){
    $('.hero-banner').addClass('image-video-text-module');
    $('.hero-banner').append('<div class="popup-outer" style="display: none;"><div class="popup-inner"><video width="100%" height="100%" controls=""><source src="https://cdn2.hubspot.net/hubfs/4590271/machismo.mp4?t=1537267211595" type="video/mp4"><source src="https://cdn2.hubspot.net/hubfs/4590271/machismo.mp4?t=1537267211595" type="video/ogg">Your browser does not support the video tag.</video></div><div class="exit-popup"></div></div>');
    $('.hero-banner .video-nappi').addClass('video-popup-btn');
    managePopup();
});
</script>

---

If this answer helped, please, mark as solved 😄

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.

[tette_engage]

@tjoyce Awesome, as always. Quick follow-up: why doesn't my button want to centralize? Shouldn't margin: auto; work?

[tjoyce]

@tette_engage - Try: 

.hero-banner .video-nappi:before {
    left: 0;
    left: 50%;
}

---

If this answer helped, please, mark as solved 😄

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.

[tette_engage]

Wow, I'm blind... 🙂 thanks!

[jessebeginbound]

If you ever want to save time in the future, we created a Custom Module that creates a popup with custom overlay color for any public YouTube or Vimeo video. Figured it was worth mentioning and you can check it out on the HubSpot Marketplace here:

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