diff --git a/examples/official-site/sqlpage/migrations/02_hero_component.sql b/examples/official-site/sqlpage/migrations/02_hero_component.sql
index 5ef2b59b..8066f873 100644
--- a/examples/official-site/sqlpage/migrations/02_hero_component.sql
+++ b/examples/official-site/sqlpage/migrations/02_hero_component.sql
@@ -66,6 +66,13 @@ FROM (
                 TRUE,
                 TRUE
             ),
+            (
+                'poster',
+                'URL of the image to be displayed before the video starts.',
+                'URL',
+                TRUE,
+                TRUE
+            ),
             -- item level
             (
                 'title',
diff --git a/sqlpage/templates/hero.handlebars b/sqlpage/templates/hero.handlebars
index c62b92e7..c6d182c0 100644
--- a/sqlpage/templates/hero.handlebars
+++ b/sqlpage/templates/hero.handlebars
@@ -4,7 +4,7 @@
     <div class="fs-1 mx-5 text-muted">
       {{~description~}}
       {{~#if description_md~}}
-          {{{markdown description_md}}}
+        {{{markdown description_md}}}
       {{~/if~}}
     </div>
     {{#if link}}
@@ -15,7 +15,12 @@
     <img src="{{image}}" alt="{{title}}" class="hero-image img-fluid col-lg-6" />
   {{/if}}
   {{#if video}}
-    <video src="{{video}}" alt="{{title}}" class="hero-image img-fluid col-lg-6" controls />
+    <video src="{{video}}" alt="{{title}}" class="hero-image img-fluid col-lg-6" controls 
+      {{#if poster}}
+        preload="none"
+        poster="{{poster}}"
+      {{/if}}>
+    </video>
   {{/if}}
 </header>
 
@@ -28,7 +33,7 @@
       <div class="card-body text-center p-4 p-lg-5 pt-0 pt-lg-0">
         {{#if icon}}
         <div style="margin-top: -1.5rem;" class="badge bg-{{default color 'success'}} text-{{default color 'success'}}-fg fs-1 mb-4 p-2">
-            {{~icon_img icon 30~}}
+          {{~icon_img icon 30~}}
         </div>
         {{/if}}
         <h2>
@@ -39,11 +44,11 @@
           {{#if link}}
           </a>
           {{/if}}
-          </h2>
+        </h2>
         <div class="mb-0">
           {{~description~}}
           {{~#if description_md~}}
-              {{{markdown description_md}}}
+            {{{markdown description_md}}}
           {{~/if~}}
         </div>
       </div>