HubSpot CMS: Implementation Guide for Video Hero Banners (Video Above-the-Fold)

Demo Video

Detail

Capturing a user's attention the moment they land on your website is crucial for instantly communicating your brand's identity. Placing a video in the "Above-the-Fold" (Hero Area) is one of the most effective ways to achieve this. By implementing the "Video Above-the-Fold Module," you can upload videos and control their behavior directly from the management screen without needing assistance from an engineer.

1. Objectives of This Module

The primary goal of this module is to "allow anyone to easily build high-quality full-screen video backgrounds or floating player features at the top of their site."

Key benefits include:

Enhanced Visual Experience: Dynamically express brand energy or product textures that static images cannot fully convey.
Reduced Operational Load: Simply select a video uploaded to the HubSpot File Manager to set a background video without worrying about complex HTML/CSS code.
Rich Viewing Features: In addition to standard background videos, you can enable a "Floating Player" feature without code, which keeps the video visible in a small window at the corner of the screen as the user scrolls.

2. Primary Use Cases

Communicating Brand Concepts: Share your brand's world with visitors instantly by auto-playing an image video at the very top of the site.
Product Demonstrations: Show product usability or use-case scenarios through video to deepen understanding before guiding users toward actions like requesting a demo.
Constant Exposure for Webinars/Video Content: Even when the main video scrolls out of view, the floating player feature ensures continuous viewing and helps prevent user drop-off.

3. Implementation and Operational Steps

This section covers the entire process, from creating a new page to applying the code and configuring operational settings.

Step 1: Page Creation and Module Placement

Navigate to the "Content" menu in your HubSpot dashboard and create a new page (e.g., a landing page). In the editor's left sidebar, search for the module name you created and drag-and-drop it to the very top (Above-the-Fold) of the editing area.

Step 2: Applying Code in the Design Manager

To enable advanced video controls (such as autoplay or floating features), perform the following in the Design Manager:

File Preparation: Create a new module in the Design Manager.
Paste the Code: Copy and paste the provided source code into the respective sections (HTML/HubL, CSS, and JS), then save and publish. This integrates the logic for scroll detection and custom playback buttons.

Step 3: Editor Configuration and Customization

Once the code is applied, you can adjust details via the side panel in the page editor without any coding:

Video Selection: Use the video_file field to select a video already uploaded to HubSpot.
Behavior Toggles: Use checkboxes to enable or disable "Autoplay" and "Loop Video."
Poster Image Setting: Set a "Poster Image" (static image) to be displayed while the video is loading, ensuring a seamless user experience.
Floating Settings: Check "Enable Floating" if you want the video to move to the corner of the screen when the main player is hidden.

Module Source Code

Create a "New Module" in the HubSpot Design Manager and paste the following code into each respective section.

1. fields.json

This is the field definition. It consists of a repeater field (Items) and style setting fields (Styles).

[
 {
  "picker": "file",
  "display_width": null,
  "id": "85f1fb81-9630-d95c-8044-f0d56394c9b8",
  "label": "video_file",
  "locked": false,
  "name": "video_file",
  "required": false,
  "type": "file"
 },
 {
  "default": false,
  "display": "checkbox",
  "display_width": null,
  "id": "95362a6b-3ac2-608f-3c46-947fd1f71fd7",
  "label": "autoplay",
  "locked": false,
  "name": "autoplay",
  "required": false,
  "type": "boolean"
 },
 {
  "default": false,
  "display": "checkbox",
  "display_width": null,
  "id": "771f1aed-83f3-dfb2-395d-b5b0f1607d2b",
  "label": "loop_video",
  "locked": false,
  "name": "loop_video",
  "required": false,
  "type": "boolean"
 },
 {
  "default": false,
  "display": "checkbox",
  "display_width": null,
  "id": "2f8d7054-9948-7913-9bad-b16c8976b16d",
  "label": "enable_floating",
  "locked": false,
  "name": "enable_floating",
  "required": false,
  "type": "boolean"
 },
 {
  "default": {
   "size_type": "auto",
   "src": "",
   "alt": null,
   "loading": "lazy"
  },
  "display_width": null,
  "id": "a02f8772-c972-036b-1f2d-ae697f000c31",
  "label": "poster_image",
  "locked": false,
  "name": "poster_image",
  "required": false,
  "resizable": true,
  "responsive": true,
  "show_loading": false,
  "type": "image"
 }
]

Source Code

HTML

<!-- HubSpot カスタム動画モジュール -->
{% set video_src = "" %}
{% if module.video_file %}
  {% if module.video_file.url %}
    {% set video_src = module.video_file.url %}
  {% elif module.video_file.src %}
    {% set video_src = module.video_file.src %}
  {% elif module.video_file is string %}
    {% set video_src = module.video_file %}
  {% endif %}
{% endif %}

{% if video_src %}
<div class="custom-video-player" id="videoPlayerContainer-{{ name }}" 
     data-loop="{{ module.loop_video }}" 
     data-floating="{{ module.enable_floating }}">
  <div class="video-wrapper">
    <video 
      id="customVideo-{{ name }}" 
      class="video-element"
      {% if module.autoplay %}autoplay{% endif %}
      muted
      {% if module.loop_video %}loop{% endif %}
      playsinline
      preload="auto"
      webkit-playsinline="true"
      crossorigin="anonymous"
      {% if module.poster_image.src %}poster="{{ module.poster_image.src }}"{% endif %}
    >
      <source src="{{ video_src }}" type="video/mp4">
    </video>
    
    <div class="play-button-overlay" id="playButtonOverlay-{{ name }}">
      <button class="play-button" id="playButton-{{ name }}" aria-label="動画を再生">
        <svg class="play-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
        <svg class="pause-icon" viewBox="0 0 24 24" fill="currentColor" style="display: none;"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
      </button>
    </div>
    
    <div class="progress-bar" id="progressBar-{{ name }}">
      <div class="progress-fill" id="progressFill-{{ name }}"></div>
    </div>
  </div>
  
  {% if module.enable_floating %}
  <div class="floating-player" id="floatingPlayer-{{ name }}" style="display: none;">
    <div class="floating-video-wrapper">
      <video id="floatingVideo-{{ name }}" class="floating-video-element" muted {% if module.loop_video %}loop{% endif %} playsinline crossorigin="anonymous">
        <source src="{{ video_src }}" type="video/mp4">
      </video>
      <div class="floating-play-button-overlay" id="floatingPlayButtonOverlay-{{ name }}">
        <button class="floating-play-button" id="floatingPlayButton-{{ name }}" aria-label="動画を再生">
          <svg class="play-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
          <svg class="pause-icon" viewBox="0 0 24 24" fill="currentColor" style="display: none;"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
        </button>
      </div>
      <button class="floating-close-button" id="floatingCloseButton-{{ name }}" aria-label="フローティングプレイヤーを閉じる">
        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
      </button>
    </div>
  </div>
  {% endif %}
</div>
{% else %}
<div style="padding: 40px; text-align: center; background: #f5f5f5; border-radius: 12px;">
  <p style="color: #666; margin: 0;">動画ファイルを選択してください</p>
</div>
{% endif %}

CSS

.custom-video-player {
  position: relative; max-width: 100%; margin: 0 auto; background: #000; border-radius: 12px; overflow: hidden;
}
.video-wrapper { position: relative; width: 100%; background: #000; min-height: 200px; display: flex; justify-content: center; align-items: center; }
.video-element { max-width: 100%; max-height: 70vh; object-fit: contain; }
.play-button {
  width: 60px; height: 60px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); border: none; cursor: pointer;
}
.progress-bar { position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: rgba(255, 255, 255, 0.3); cursor: pointer; }
.progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #ff6b6b, #ff8e8e); }

/* フローティングプレイヤー */
.floating-player {
  position: fixed; bottom: 20px; right: 20px; width: 320px; height: 180px; z-index: 1000;
  border-radius: 12px; overflow: hidden; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); background: #000;
}
.floating-player.show { animation: fadeIn 0.3s ease forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }

Javascript

(function() {
  'use strict';
  function CustomVideoPlayer(containerId) {
    var self = this;
    this.suffix = containerId.replace('videoPlayerContainer-', '');
    this.container = document.getElementById(containerId);
    this.video = document.getElementById('customVideo-' + this.suffix);
    this.floatingPlayer = document.getElementById('floatingPlayer-' + this.suffix);
    this.floatingVideo = document.getElementById('floatingVideo-' + this.suffix);
    this.enableFloating = this.container.getAttribute('data-floating') === 'true';

    this.init = function() {
      if (!self.video) return;
      this.setupEventListeners();
      if (this.enableFloating) this.setupScrollDetection();
    };

    this.setupEventListeners = function() {
      this.video.addEventListener('click', function() { self.togglePlay(); });
      if (document.getElementById('playButton-' + this.suffix)) {
        document.getElementById('playButton-' + this.suffix).addEventListener('click', function(e) {
          e.stopPropagation(); self.togglePlay();
        });
      }
      this.video.addEventListener('timeupdate', function() { self.updateProgress(); });
    };

    this.setupScrollDetection = function() {
      if (typeof IntersectionObserver !== 'undefined') {
        var observer = new IntersectionObserver(function(entries) {
          entries.forEach(function(entry) {
            if (!entry.isIntersecting && !self.video.paused) {
              self.showFloatingPlayer();
            } else if (entry.isIntersecting && self.isFloating) {
              self.hideFloatingPlayer();
            }
          });
        }, { threshold: 0.1 });
        observer.observe(self.container);
      }
    };

    this.togglePlay = function() {
      if (this.video.paused) this.video.play();
      else this.video.pause();
    };

    this.showFloatingPlayer = function() {
      this.isFloating = true;
      this.video.pause();
      this.floatingPlayer.style.display = 'block';
      this.floatingPlayer.classList.add('show');
      this.floatingVideo.currentTime = this.video.currentTime;
      this.floatingVideo.play();
    };

    this.init();
  }

  function initializeAllPlayers() {
    document.querySelectorAll('[id^="videoPlayerContainer-"]').forEach(function(container) {
      if (!container.hasAttribute('data-initialized')) {
        new CustomVideoPlayer(container.id);
        container.setAttribute('data-initialized', 'true');
      }
    });
  }
  window.addEventListener('load', initializeAllPlayers);
})();

FAQ

Does the video auto-play on smartphones?

Yes. Because the code includes the muted and playsinline attributes, auto-play is supported on most modern smartphone browsers.

Can I adjust the size (height) of the video?

Yes. You can change whether the video fills the entire screen (100vh) or is restricted to a specific height by adjusting the settings in the module panel or modifying values like max-height in the CSS.

Can I display YouTube videos using this module?

This module is optimized for direct references to MP4 files and other formats uploaded directly to HubSpot. If you wish to use YouTube videos, it is recommended to use HubSpot’s standard video module or an external embed code.

Search

Search more

Related Template

Need Customization?

We can customize this sample to match your specific business requirements.

Book Free Consultation

Got a quick dev request?

Put it on Trello!Need a fix for HubSpot, CMS, or GAS? Post it on Trello.

Development Requests Here