diff --git a/src/components/Headline/Headline.stories.svelte b/src/components/Headline/Headline.stories.svelte
index 26e2ff89..5034fc44 100644
--- a/src/components/Headline/Headline.stories.svelte
+++ b/src/components/Headline/Headline.stories.svelte
@@ -77,7 +77,7 @@
 </Story>
 
 <Story name="With custom hed" {...withStoryDocs(customHedDocs)}>
-  <Headline>
+  <Headline width="wide">
     <h1 class="custom-hed" slot="hed">
       <span class="small block text-base">The secret to</span>
       “The Nutcracker's”
diff --git a/src/components/Headline/Headline.svelte b/src/components/Headline/Headline.svelte
index 228778cf..f86adbfb 100644
--- a/src/components/Headline/Headline.svelte
+++ b/src/components/Headline/Headline.svelte
@@ -74,7 +74,7 @@
 </script>
 
 <Block width="{width}" class="headline text-center fmt-9 fmb-5 {cls}">
-  <header>
+  <header class="relative">
     {#if $$slots.crown}
       <div class="crown-container">
         <!-- Crown named slot -->
diff --git a/src/components/Headline/stories/docs/customHed.md b/src/components/Headline/stories/docs/customHed.md
index 415e51a6..25228bd3 100644
--- a/src/components/Headline/stories/docs/customHed.md
+++ b/src/components/Headline/stories/docs/customHed.md
@@ -5,7 +5,7 @@ Use the `hed` and/or `dek` named slots to override those elements with completel
   import { Headline } from '@reuters-graphics/graphics-components';
 </script>
 
-<Headline>
+<Headline width="wide">
   <h1 class="custom-hed" slot="hed">
     <span class="small block text-base">The secret to</span>
     “The Nutcracker's”
diff --git a/src/components/HeroHeadline/Hero.stories.svelte b/src/components/HeroHeadline/Hero.stories.svelte
index 9031a9d7..93d4427b 100644
--- a/src/components/HeroHeadline/Hero.stories.svelte
+++ b/src/components/HeroHeadline/Hero.stories.svelte
@@ -7,10 +7,20 @@
   import backgroundGraphicDocs from './stories/docs/backgroundGraphic.md?raw';
   // @ts-ignore
   import inlineGraphicDocs from './stories/docs/inlineGraphic.md?raw';
+  // @ts-ignore
+  import transparentHeaderDocs from './stories/docs/transparentHeader.md?raw';
+  // @ts-ignore
+  import videoDocs from './stories/docs/backgroundVideo.md?raw';
+  // @ts-ignore
+  import customHedDocs from './stories/docs/customHed.md?raw';
 
   // @ts-ignore
   import polarImgSrc from './stories/polar.jpg';
+  // @ts-ignore
+  import eurovisImgSrc from './stories/eurovis.jpeg';
 
+  import Block from '../Block/Block.svelte';
+  import SiteHeader from '../SiteHeader/SiteHeader.svelte';
   import HeroHeadline from './Hero.svelte';
   import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
 
@@ -34,6 +44,10 @@
         control: 'select',
         options: ['normal', 'wide', 'wider', 'widest'],
       },
+      hedAlign: {
+        control: 'select',
+        options: ['left', 'center', 'right'],
+      },
       width: {
         control: 'select',
         options: ['normal', 'wide', 'wider', 'widest'],
@@ -49,6 +63,10 @@
 />
 
 <Template let:args>
+  <Block width="fluid">
+    <SiteHeader />
+  </Block>
+
   <HeroHeadline {...args} />
 </Template>
 
@@ -64,12 +82,33 @@
   }}"
 />
 
+<Story name="With transparent header" {...withStoryDocs(transparentHeaderDocs)}>
+  <div class="transparent-header">
+    <Block width="fluid">
+      <SiteHeader />
+    </Block>
+
+    <HeroHeadline
+      section="World News"
+      hed="Reuters Graphics Interactive"
+      dek="The beginning of a beautiful page"
+      authors="{['Simon Scarr', 'Vijdan Mohammad Kawoosa']}"
+      publishTime="{new Date('2022-03-04').toISOString()}"
+      img="{polarImgSrc}"
+    />
+  </div>
+</Story>
+
 <Story name="With backdrop graphic" {...withStoryDocs(backgroundGraphicDocs)}>
+  <Block width="fluid">
+    <SiteHeader />
+  </Block>
+
   <HeroHeadline
     hed="{'Earthquake devastates Afghanistan'}"
     hedSize="{'big'}"
     hedWidth="wide"
-    class="mb-0"
+    class="custom-hero mb-0"
     dek=""
     authors="{[
       'Anand Katakam',
@@ -86,7 +125,7 @@
   >
     <div slot="background">
       <GraphicBlock
-        width="fluid"
+        width="widest"
         role="figure"
         class="my-0"
         textWidth="normal"
@@ -98,15 +137,17 @@
     </div>
   </HeroHeadline>
   <style lang="scss">
-    .hero-headline .headline {
-      align-items: flex-end;
-
-      @media (max-width: 1100px) {
-        max-width: var(--normal-column-width) !important;
-      }
-    }
-
     .hero-wrapper {
+      .custom-hero.headline {
+        // Adjust vertical positioning
+        align-items: flex-end !important;
+
+        @media (max-width: 1100px) {
+          // Adjust line length of title
+          max-width: var(--normal-column-width) !important;
+        }
+      }
+
       // Make hero smaller than 100vh
       --heroHeight: 85svh;
 
@@ -114,15 +155,84 @@
         --heroHeight: 65svh;
       }
 
+      // For small height
+      @media (max-height: 850px) {
+        --heroHeight: 100svh;
+      }
+
       // Custom hero sizing for landscape mobile
       @media (max-width: 960px) and (orientation: landscape) {
         --heroHeight: 200svh;
       }
     }
+
+    // Override default fixed height for hero layout in embeds
+    .hero-wrapper.embedded {
+      --heroHeight: 1000px;
+    }
+  </style>
+</Story>
+
+<Story name="With backdrop video" {...withStoryDocs(videoDocs)}>
+  <Block width="fluid">
+    <SiteHeader />
+  </Block>
+
+  <HeroHeadline
+    class="video-hero"
+    hed="The conflict in Ethiopia"
+    hedSize="bigger"
+    hedWidth="wide"
+    authors="{['Aditi Bhandari ', 'David Lewis']}"
+    publishTime="{new Date('2020-12-18').toISOString()}"
+  >
+    <div slot="background">
+      <GraphicBlock
+        width="widest"
+        role="figure"
+        class="my-0"
+        textWidth="normal"
+        notes="Drone footage from the Village 8 refugee camp in Sudan."
+        ariaDescription="Aerial footage of people houses in refugee camp"
+      >
+        <!-- svelte-ignore a11y-media-has-caption -->
+        <video
+          autoplay
+          muted
+          playsinline
+          loop
+          preload="true"
+          width="100%"
+          poster="video-poster.png"
+          src="https://vm.reuters.tv/9c72e/titlef2ac(425954_R21MP41500).mp4"
+        >
+        </video>
+      </GraphicBlock>
+    </div>
+  </HeroHeadline>
+  <style lang="scss">
+    .hero-wrapper {
+      --heroHeight: calc(100svh - 60px);
+      .video-hero.headline {
+        header {
+          // Adjust vertical position as offset from default center
+          top: calc(50svh - 250px);
+        }
+
+        h1 {
+          color: #ffd430;
+          text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
+        }
+      }
+    }
   </style>
 </Story>
 
 <Story name="With inline graphic" {...withStoryDocs(inlineGraphicDocs)}>
+  <Block width="fluid">
+    <SiteHeader />
+  </Block>
+
   <HeroHeadline
     hed="{'The plunge from 29,000 feet'}"
     hedWidth="wide"
@@ -146,3 +256,53 @@
     </div>
   </HeroHeadline>
 </Story>
+
+<Story name="With custom hed" {...withStoryDocs(customHedDocs)}>
+  <HeroHeadline
+    class="custom-hed"
+    authors="{[
+      'Prasanta Kumar Dutta',
+      'Dea Bankova',
+      'Aditi Bhandari',
+      'Anurag Rao',
+    ]}"
+    publishTime="{new Date('2023-05-11').toISOString()}"
+    img="{eurovisImgSrc}"
+  >
+    <h1 slot="hed">
+      <div class="body-note">A visual guide to</div>
+      <div class="title text-6xl font-light tracking-widest">EUROVISION</div>
+    </h1>
+  </HeroHeadline>
+
+  <style lang="scss">
+    .custom-hed {
+      h1 {
+        .body-note {
+          color: #ffffff;
+        }
+        .title {
+          color: #ffffff;
+          text-shadow: 1px 1px 8px #ff7c88;
+          filter: drop-shadow(0px 0px 12px #ff7c88);
+        }
+      }
+    }
+  </style>
+</Story>
+
+<style lang="scss">
+  .transparent-header {
+    :global(.nav-container) {
+      background-color: transparent !important;
+    }
+    :global(.nav-container .inner) {
+      background-color: transparent !important;
+      border: none;
+    }
+
+    :global(.hero-wrapper) {
+      margin-top: -64px;
+    }
+  }
+</style>
diff --git a/src/components/HeroHeadline/Hero.svelte b/src/components/HeroHeadline/Hero.svelte
index f73b5111..bb2cffde 100644
--- a/src/components/HeroHeadline/Hero.svelte
+++ b/src/components/HeroHeadline/Hero.svelte
@@ -108,119 +108,159 @@
   }
 </script>
 
-<div class="hero-wrapper">
-  <!-- Background media hero-->
-  {#if $$slots.background || img}
-    <Block width="fluid" class="hero-headline background-hero fmt-0">
-      <Headline
-        class="{cls} !text-{hedAlign}"
-        width="{hedWidth}"
-        section="{section}"
-        hedSize="{hedSize}"
-        hed="{hed}"
-        dek="{dek}"
-      />
-      <div class="background-container">
-        {#if $$slots.background}
-          <!-- Hero graphic named slot -->
-          <slot name="background" />
-        {:else}
-          <GraphicBlock
-            width="{width}"
-            role="img"
-            class="my-0"
-            textWidth="normal"
-            ariaDescription="{ariaDescription}"
+<div style="--heroHeight: {embedded ? '850px' : '100svh'}; display:contents;">
+  <div class="hero-wrapper fmb-7" class:embedded="{embedded}">
+    <!-- Background media hero-->
+    {#if $$slots.background || img}
+      <Block width="fluid" class="hero-headline background-hero fmt-0">
+        {#if $$slots.hed}
+          <Headline
+            class="{cls} !text-{hedAlign}"
+            width="{hedWidth}"
+            section="{section}"
+            hedSize="{hedSize}"
+            hed="{hed}"
+            dek="{dek}"
           >
-            <div
-              class="background-image"
-              style="background-image: url({img})"
-            ></div>
-          </GraphicBlock>
+            <!-- Headline named slot -->
+            <div slot="hed">
+              <slot name="hed" />
+            </div>
+          </Headline>
+        {:else}
+          <Headline
+            class="{cls} !text-{hedAlign}"
+            width="{hedWidth}"
+            section="{section}"
+            hedSize="{hedSize}"
+            hed="{hed}"
+            dek="{dek}"
+          />
         {/if}
-      </div>
-    </Block>
-    {#if notes}
-      <TextBlock width="normal">
-        <aside class="fmt-2">
-          {@html marked(notes)}
-        </aside>
-      </TextBlock>
+        <div class="background-container">
+          {#if $$slots.background}
+            <!-- Hero graphic named slot -->
+            <slot name="background" />
+          {:else}
+            <GraphicBlock
+              width="{width}"
+              role="img"
+              class="my-0"
+              textWidth="normal"
+              ariaDescription="{ariaDescription}"
+            >
+              <div
+                class="background-image"
+                style="background-image: url({img})"
+              ></div>
+            </GraphicBlock>
+          {/if}
+        </div>
+      </Block>
+      {#if notes}
+        <TextBlock width="normal">
+          <aside class="fmt-2">
+            {@html marked(notes)}
+          </aside>
+        </TextBlock>
+      {/if}
     {/if}
-  {/if}
 
-  <!-- Inline hero -->
-  {#if $$slots.inline}
-    <Block width="fluid" class="hero-headline inline-hero">
-      <Headline
-        class="{cls} !text-{hedAlign}"
-        width="{hedWidth}"
-        section="{section}"
-        hedSize="{hedSize}"
-        hed="{hed}"
-        dek="{dek}"
-      />
-      <div class="graphic-container">
-        <!-- Hero named slot -->
-        <slot name="inline" />
-      </div>
-    </Block>
-  {/if}
+    <!-- Inline hero -->
+    {#if $$slots.inline}
+      <Block width="fluid" class="hero-headline inline-hero">
+        {#if $$slots.hed}
+          <Headline
+            class="{cls} !text-{hedAlign}"
+            width="{hedWidth}"
+            section="{section}"
+            hedSize="{hedSize}"
+            hed="{hed}"
+            dek="{dek}"
+          >
+            <!-- Headline named slot -->
+            <div slot="hed">
+              <slot name="hed" />
+            </div>
+          </Headline>
+        {:else}
+          <Headline
+            class="{cls} !text-{hedAlign}"
+            width="{hedWidth}"
+            section="{section}"
+            hedSize="{hedSize}"
+            hed="{hed}"
+            dek="{dek}"
+          />
+        {/if}
+        <div class="graphic-container">
+          <!-- Hero named slot -->
+          <slot name="inline" />
+        </div>
+      </Block>
+    {/if}
+  </div>
 </div>
 
-{#if $$slots.byline}
-  <!-- Custom byline/dateline -->
-  <slot name="byline" />
-{:else if authors.length > 0 || publishTime}
-  <Byline
-    class="fmt-7 fmb-5"
-    authors="{authors}"
-    publishTime="{publishTime}"
-    updateTime="{updateTime}"
-    align="left"
-  />
-{/if}
+<div class="hero-byline fmb-5">
+  {#if $$slots.byline}
+    <!-- Custom byline/dateline -->
+    <slot name="byline" />
+  {:else if authors.length > 0 || publishTime}
+    <Byline
+      authors="{authors}"
+      publishTime="{publishTime}"
+      updateTime="{updateTime}"
+      align="left"
+    />
+  {/if}
+</div>
 
 <style lang="scss">
   @import '../../scss/mixins';
 
-  :global {
-    .background-hero {
+  .hero-wrapper {
+    :global(.background-hero) {
       height: var(--heroHeight, 100svh);
       max-height: 1800px;
-      width: 100%;
       position: relative;
-
-      .headline {
-        @include fmt-0;
-        z-index: 1;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: absolute;
-        width: 100%;
-        top: 0;
-        left: 50%;
-        height: var(--heroHeight, 100svh);
-        max-height: 1800px;
-        transform: translateX(-50%);
-      }
     }
 
-    .byline-container {
+    :global(.background-hero .headline) {
+      @include fmt-0;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      width: 100%;
+      top: 0;
+      left: 50%;
+      height: var(--heroHeight, 100svh);
+      max-height: 1800px;
+      transform: translateX(-50%);
+    }
+
+    :global(aside p) {
+      @include body-caption;
+    }
+
+    :global(video) {
+      position: relative;
+      display: block;
+      width: 100%;
+      height: var(--heroHeight);
+      object-fit: cover;
+    }
+  }
+
+  .hero-byline {
+    :global(.byline-container) {
       z-index: 1;
       position: relative;
     }
-
-    .hero-wrapper {
-      // Caption and Sources
-      aside {
-        p {
-          @include body-caption;
-        }
-      }
-    }
   }
+
   .background-image {
     width: auto;
     height: var(--heroHeight, 100svh);
diff --git a/src/components/HeroHeadline/stories/docs/backgroundGraphic.md b/src/components/HeroHeadline/stories/docs/backgroundGraphic.md
index c85ced97..e002e11c 100644
--- a/src/components/HeroHeadline/stories/docs/backgroundGraphic.md
+++ b/src/components/HeroHeadline/stories/docs/backgroundGraphic.md
@@ -2,8 +2,8 @@ Reuters Graphics headline with ai2svelte graphic as background.
 
 ```svelte
 <script>
-  import { Headline } from '@reuters-graphics/graphics-components';
-  import Map from './ai2svelte/graphic.svelte';
+  import { HeroHeadline } from '@reuters-graphics/graphics-components';
+  import QuakeMap from './ai2svelte/graphic.svelte';
   import { assets } from '$app/paths';
 </script>
 
@@ -11,7 +11,7 @@ Reuters Graphics headline with ai2svelte graphic as background.
   hed="{'Earthquake devastates Afghanistan'}"
   hedSize="{'big'}"
   hedWidth="wide"
-  class="mb-0"
+  class="custom-hero mb-0"
   dek=""
   authors="{[
     'Anand Katakam',
@@ -28,7 +28,7 @@ Reuters Graphics headline with ai2svelte graphic as background.
 >
   <div slot="background">
     <GraphicBlock
-      width="fluid"
+      width="widest"
       role="figure"
       class="my-0"
       textWidth="normal"
@@ -41,15 +41,17 @@ Reuters Graphics headline with ai2svelte graphic as background.
 </HeroHeadline>
 
 <style lang="scss">
-  .hero-headline .headline {
-    align-items: flex-end;
-
-    @media (max-width: 1100px) {
-      max-width: var(--normal-column-width) !important;
-    }
-  }
-
   .hero-wrapper {
+    .custom-hero.headline {
+      // Adjust vertical positioning
+      align-items: flex-end !important;
+
+      @media (max-width: 1100px) {
+        // Adjust line length of title
+        max-width: var(--normal-column-width) !important;
+      }
+    }
+
     // Make hero smaller than 100vh
     --heroHeight: 85svh;
 
@@ -57,10 +59,20 @@ Reuters Graphics headline with ai2svelte graphic as background.
       --heroHeight: 65svh;
     }
 
+    // For small height
+    @media (max-height: 850px) {
+      --heroHeight: 100svh;
+    }
+
     // Custom hero sizing for landscape mobile
     @media (max-width: 960px) and (orientation: landscape) {
       --heroHeight: 200svh;
     }
   }
+
+  // Override default fixed height for hero layout in embeds
+  .hero-wrapper.embedded {
+    --heroHeight: 1000px;
+  }
 </style>
 ```
diff --git a/src/components/HeroHeadline/stories/docs/backgroundVideo.md b/src/components/HeroHeadline/stories/docs/backgroundVideo.md
new file mode 100644
index 00000000..767c25a0
--- /dev/null
+++ b/src/components/HeroHeadline/stories/docs/backgroundVideo.md
@@ -0,0 +1,58 @@
+Add a cover video and position the title with ease.
+
+```svelte
+<script>
+  import { HeroHeadline } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths';
+</script>
+
+<HeroHeadline
+  class="custom-hero"
+  hed="The conflict in Ethiopia"
+  hedSize="bigger"
+  hedWidth="wide"
+  authors="{['Aditi Bhandari ', 'David Lewis']}"
+  publishTime="{new Date('2020-12-18').toISOString()}"
+>
+  <div slot="background">
+    <GraphicBlock
+      width="widest"
+      role="figure"
+      class="my-0"
+      textWidth="normal"
+      notes="Drone footage from the Village 8 refugee camp in Sudan."
+      ariaDescription="Aerial footage of people houses in refugee camp"
+    >
+      <!-- svelte-ignore a11y-media-has-caption -->
+      <video
+        autoplay
+        muted
+        playsinline
+        loop
+        preload="true"
+        width="100%"
+        poster="video-poster.png"
+        src="{assets}/videos/intro.mp4"
+      >
+      </video>
+    </GraphicBlock>
+  </div>
+</HeroHeadline>
+
+<style lang="scss">
+  .hero-wrapper {
+    --heroHeight: calc(100svh - 60px);
+    .custom-hero.headline {
+      header {
+        // Adjust vertical position as offset from default center
+        top: calc(50svh - 250px);
+      }
+
+      h1 {
+        color: #ffd430;
+        text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
+      }
+    }
+  }
+</style>
+```
diff --git a/src/components/HeroHeadline/stories/docs/customHed.md b/src/components/HeroHeadline/stories/docs/customHed.md
new file mode 100644
index 00000000..1118bfc7
--- /dev/null
+++ b/src/components/HeroHeadline/stories/docs/customHed.md
@@ -0,0 +1,40 @@
+Add a custom styled headline.
+
+```svelte
+<script>
+  import { HeroHeadline } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
+</script>
+
+<HeroHeadline
+  class="custom-hed"
+  authors="{[
+    'Prasanta Kumar Dutta',
+    'Dea Bankova',
+    'Aditi Bhandari',
+    'Anurag Rao',
+  ]}"
+  publishTime="{new Date('2023-05-11').toISOString()}"
+  img="{`${assets}/images/myImage.jpg`}"
+>
+  <h1 slot="hed">
+    <div class="body-note">A visual guide to</div>
+    <div class="title text-6xl font-light tracking-widest">EUROVISION</div>
+  </h1>
+</HeroHeadline>
+
+<style lang="scss">
+  .custom-hed {
+    h1 {
+      .body-note {
+        color: #ffffff;
+      }
+      .title {
+        color: #ffffff;
+        text-shadow: 1px 1px 8px #ff7c88;
+        filter: drop-shadow(0px 0px 12px #ff7c88);
+      }
+    }
+  }
+</style>
+```
diff --git a/src/components/HeroHeadline/stories/docs/inlineGraphic.md b/src/components/HeroHeadline/stories/docs/inlineGraphic.md
index c3b0b182..c4b395ce 100644
--- a/src/components/HeroHeadline/stories/docs/inlineGraphic.md
+++ b/src/components/HeroHeadline/stories/docs/inlineGraphic.md
@@ -2,7 +2,7 @@ Reuters Graphics headline followed by a graphic or any media block.
 
 ```svelte
 <script>
-  import { Headline } from '@reuters-graphics/graphics-components';
+  import { HeroHeadline } from '@reuters-graphics/graphics-components';
   import Map from './ai2svelte/graphic.svelte';
   import { assets } from '$app/paths';
 </script>
diff --git a/src/components/HeroHeadline/stories/docs/transparentHeader.md b/src/components/HeroHeadline/stories/docs/transparentHeader.md
new file mode 100644
index 00000000..55761f94
--- /dev/null
+++ b/src/components/HeroHeadline/stories/docs/transparentHeader.md
@@ -0,0 +1,17 @@
+Make the hero full bleed and under the header.
+
+```scss
+// global.scss
+
+.nav-container {
+  background-color: transparent !important;
+}
+.nav-container .inner {
+  background-color: transparent !important;
+  border: none;
+}
+
+.hero-wrapper {
+  margin-top: -64px;
+}
+```
diff --git a/src/components/HeroHeadline/stories/eurovis.jpeg b/src/components/HeroHeadline/stories/eurovis.jpeg
new file mode 100644
index 00000000..ad298a80
Binary files /dev/null and b/src/components/HeroHeadline/stories/eurovis.jpeg differ