VIEW LIVE DEMO
<header class="header-23 header-23-v2" style="display: none;"></header>
<section class="header-23-sub header-23-sub-v2 header-23-sub-mp {% if module.enable_menu %}has-menu{% endif %}" style="background-color: {{ module.background_color }};">
<div class="background" id="bgVideo" style="background-image: url('{{ module.background_image.src }}'); opacity: {{ module.background_opacity }};">
{% if module.wistia_background_video_id %}
<div class="background-video-inner">
<a class="oembed oembed-bg-video" href="{{ module.wistia_background_video_id }}"></a>
</div>
{% endif %}
</div>
<div class="hero-bg-container">
<div class="hero-unit">
<strong class="left-text" style="color: {{ module.left_text_color }};">{{ module.left_text }}</strong>
{% if module.wistia_video_id %}
<div class="wistia_responsive_padding" style="position:relative; display: inline-block;">
<div class="wistia_responsive_wrapper" style="height: 100%; left: 0; position: absolute; top :0; width: 100%;">
<span class="wistia_embed" style="display:inline-block;height:100%;width:100%"><a class="btn-play header-23-play" href="{{ module.wistia_video_id }}">Play</a></span>
</div>
</div>
{% endif %}
<span class="right-text" style="color: {{ module.right_text_color }};">{{ module.right_text }}</span>
</div>
</div>
</section>
.header-23-sub-mp .background {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
background: 50% 50% no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity: 20;
filter: alpha(opacity=2000);
opacity: 0.2;
filter: alpha(opacity=20);
}
.header-23-sub-mp .hero-bg-container {
max-width: 1170px;
width: 100%;
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
position: relative;
z-index: 2;
}
.header-23-sub-mp #bgVideo {
overflow: hidden;
}
.header-23-sub-mp #bgVideo > video {
position: absolute !important;
}
.header-23-sub-mp {
z-index: 50;
left: 0;
width: 100%;
position: relative;
padding-top: 360px;
padding-bottom: 270px;
color: white;
text-align: center;
background: #1b1e21;
}
@media (max-width: 991px) {
.header-23-sub-mp {
padding-top: 260px;
padding-bottom: 170px;
}
}
.header-23-sub-mp .hero-unit {
margin: 0;
padding: 0;
background: transparent;
font-size: 30px;
letter-spacing: -1px;
}
.header-23-sub-mp .hero-unit strong {
font-size: 36px;
font-weight: 800;
letter-spacing: -2px;
}
@media (max-width: 991px) {
.header-23-sub-mp .hero-unit strong {
display: block;
}
}
.header-23-sub-mp .hero-unit span {
font-weight: 300;
}
@media (max-width: 991px) {
.header-23-sub-mp .hero-unit span {
display: block;
}
}
.header-23-sub-mp .hero-unit .btn-play {
display: inline-block;
text-indent: -9999px;
vertical-align: middle;
overflow: hidden;
width: 67px;
height: 67px;
margin: 0 50px;
outline: none;
background: url() no-repeat;
}
@media (max-width: 991px) {
.header-23-sub-mp .hero-unit .btn-play {
margin: 35px 0;
}
}
.header-23-sub-mp .background {
opacity: 10;
filter: alpha(opacity=1000);
opacity: 0.1;
filter: alpha(opacity=10);
}
.header-23-sub-mp {
padding-top: 290px;
}
.header-23-sub-mp .wistia_responsive_padding {
width: 167px;
height: 67px;
vertical-align: middle;
position: relative;
display: inline-block;
}
.header-23-sub-mp #bgVideo .background-video-inner{
position: relative;
height: 100%;
pointer-events: none;
}
.header-23-sub-mp #bgVideo .background-video-inner iframe,
.header-23-sub-mp #bgVideo .background-video-inner .wistia_embed{
pointer-events: none;
width: 100% !important;
height: auto !important;
min-width: 1366px;
top: -99999px;
position: absolute !important;
bottom: -99999px;
left: -99999px;
right: -99999px;
margin: auto;
}
.header-23-sub-mp #bgVideo .background-video-inner iframe {
height: 100% !important;
}
.header-23-sub-mp .hero-unit .left-text, .header-23-sub-mp .hero-unit .right-text {
display: inline-block;
max-width: 370px;
width: 100%;
vertical-align: middle;
}
.header-23-sub-mp .hero-unit .left-text { text-align: right; }
.header-23-sub-mp .hero-unit .right-text { text-align: left; }
.mfp-close-btn-in.header-23-popup .mfp-close, .mfp-close-btn-in.header-23-popup .mfp-close:active {
position: absolute;
top: 0;
right: -60px;
width: 50px;
padding-right: 0;
}
@media (max-width: 991px) {
.header-23-sub-mp {
padding-top: 190px;
}
.header-23-sub-mp .wistia_responsive_padding {
height: 125px;
}
.header-23-sub-mp .hero-unit .left-text, .header-23-sub-mp .hero-unit .right-text {
max-width: 250px;
}
}
@media (max-width: 767px) {
.header-23-sub-mp #bgVideo .background-video-inner {
display: none;
}
.header-23-sub-mp .hero-unit .left-text, .header-23-sub-mp .hero-unit .right-text {
max-width: none;
display: block;
text-align: center;
}
}
.header-23-sub-mp .background {
z-index: -1;
}
$(document).ready(function() {
hsjQuery(".header-23-play").each(function(){
var o = $(this);
var m = /wistia.com\/medias\/(.+)/.exec(o.attr("href"));
if (m) {
var id = m[1];
o.attr("href", "//fast.wistia.net/embed/iframe/" + id + (id.indexOf("?") > -1 ? "&" : "?") + "autoPlay=true");
}
}).magnificPopup({
"type": "iframe",
mainClass: "header-23-popup"
});
});
jQuery(document).ready(function($) {
$(".header-23-v2").each(function() {
var o = $(this);
if (o.hasClass("init")) {
return;
}
o.addClass("init");
var headerId = "id-" + Math.random().toString().slice(2);
o.attr("id", headerId);
var style = "";
o.find(".js-nav-styles").each(function(){
var parentMenuColor = $( this ).data( 'nav-parent-color' );
var parentMenuHoverColor = $( this ).data( 'nav-parent-hover-color' );
var childMenuColor = $( this ).data( 'nav-child-color' );
var childMenuHoverColor = $( this ).data( 'nav-child-hover-color' );
var childMenuBgColor = $( this ).data( 'nav-child-bg' );
var navId = "id-" + Math.random().toString().slice(2);
$(this).attr("id", navId);
style += "#" + navId + " ul > li > a { color: " + parentMenuColor + "; } \n";
style += "#" + navId + " ul > li > a:hover, #" + navId + " ul > li > a:focus, #" + navId + " ul > li > a:active { color: " + parentMenuHoverColor + "; } \n";
style += "#" + navId + " ul > li > .hs-menu-children-wrapper li a { color: " + childMenuColor + "; } \n";
style += "#" + navId + " ul > li > .hs-menu-children-wrapper li a:hover, #" + navId + " ul > li > .hs-menu-children-wrapper li a:focus, #" + navId + " ul > li > .hs-menu-children-wrapper li a:active { color: " + childMenuHoverColor + "; } \n";
style += "#" + navId + " ul > li > .hs-menu-children-wrapper { background-color: " + childMenuBgColor + "; } \n";
style += "#" + headerId + " .navbar-toggle .icon-bar { background-color: " + parentMenuColor + "; } \n";
});
$("<style type='text/css'/>").html(style).appendTo("head");
});
});
Modern websites use fullscreen videos to offer their visitors an interactive and entertaining experience.
The Hero Video header module can be easily added to your existing HubSpot website and allows you to embed videos from Wistia, YouTube and Vimeo.
You can add a fullscreen background video and a video that is shown if the user clicks on the play button. The module is working well on mobile devices and is fully responsive.
Choose any video from YouTube, Wistia and Vimeo and use the power of video on your website. You can tell stories, explain your product or just show a beautiful landscape.
The Hero Video header module demo can be visited here:
https://w.inboundlabs.co/hero-video-header-module-demo
The Hero Video header module is part of the Startup Framework template which can be found here:
https://marketplace.hubspot.com/products/inboundlabs/startup-framework-marketplace
If you have questions, please email me at github (at) inboundlabs.co
We'd love to have you a part of our developer community!
Find an entry with an issue, bug, or abuse?
Please complete the below information in detail and we will investigate.
Reporting as Luke Summerfield
Copyright © 2019 HubSpot, Inc.
Return to Top