Video popup module to hero-banner

SOLVE
Highlighted
Regular Contributor

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?

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Top Advisor | Platinum Partner

@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 Smiley Very Happy


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

 

Drop by and say Hi to me on slack.

7 Replies 7
Highlighted
Top Advisor | Platinum Partner

@tette_engage - the page is PW protected.

Reply
0 Upvotes
Highlighted
Regular Contributor

Should be fixed now Smiley Happy

Reply
0 Upvotes
Highlighted
Top Advisor | Platinum Partner

@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 Smiley Very Happy


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

 

Drop by and say Hi to me on slack.

Highlighted
Regular Contributor

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

Reply
0 Upvotes
Highlighted
Top Advisor | Platinum Partner

@tette_engage - Try: 

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

If this answer helped, please, mark as solved Smiley Very Happy


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

 

Drop by and say Hi to me on slack.

Reply
0 Upvotes
Highlighted
Regular Contributor

Wow, I'm blind... Smiley Happy thanks!

Highlighted
Regular Contributor | Platinum Partner

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