HubSpot CMS

Hero Video Startup Framework

Modern websites use fullscreen videos to offer their visitors an interactive and entertaining experience.

Unverified
?

After receiving a minimum of 25 recommendations, an entry earns the "Community Approved" badge.

Please keep in mind, all entries are community created and may not be fully supported by HubSpot.

0 Recommendations

View on:

GitHub

HubSpot Marketplace

HTML + HUBL
<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>

          
        
CSS
          
            .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;
}

          
        
JS
          
            $(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");
    });
});

          
        
Have Questions?

Ask technical questions in Slack.

HubSpot Developer Slack

Not a member yet? - join here
READ ME (VIEW IN GITHUB)

Hero Video Startup Framework

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


Have Questions?

If you have questions, please email me at github (at) inboundlabs.co


HubSpot

Not developing on HubSpot CMS yet?

We'd love to have you a part of our developer community!

 
0 Recommendations

Other Open Source Projects

Browse all other open source projects

CrankShaft Framework

A modern framework for accelerating build times on the HubSpot CMS. Based on a modified Bootstrap 4 framework.

Lead developers: Jon McLaren

Developer Chrome Extension

Chrome/Chromium extension for HubSpot CMS Developers that adds a developer menu, dark theme and useful shortcuts to commonly used HubSpot query parameters, resources, and tools for making HubSpot Development easier and more enjoyable.

Lead developers: Jon McLaren , William Spiro , Gonzalo Torreras

VS Code HubL Language Extension

This extension enables super fast local development of CMS pages, and is a great compliment to using the new local HubL server. It contains comprehensive HubL tag, function, filter and expression test auto-complete snippets, as well as their documentation.

Lead developers: William Spiro

Not coding on HubSpot CMS yet?

We invite you to explore why thousands of developers LOVE coding with HubSpot!

Contribute
Made with  by community members: InboundLabs.co