UnoCSS Starter Theme - Hero

A hero is a large area above the fold, typically an image, video, or call to action.

Start by creating a block type called Hero.

It has a body field by default, add a media field that can reference image, video, and remote video.

Add a hero region to the theme info file.

regions:
  hero: Hero

Add the hero region to the page template, inside our above the fold area.

{% embed 'unocss_starter_demo:layout_top' %}
  {% block top %}
    <header role="banner">
      {{ include('unocss_starter_demo:header', {
        branding: page.header,
        secondary_menu: page.secondary_menu,
        primary_menu: page.primary_menu
      }) }}

    </header>

    {{ page.hero }}

    {{ page.breadcrumb }}
    {{ page.highlighted }}
    {{ page.help }}

  {% endblock %}
{% endembed %}

Clear the cache and create a new hero block in this region. This example uses a youtube video.

Image

It's working, but the hero block display needs to be configured.

The remote video uses oEmbed, and additional libraries are loaded from the media module.
https://git.drupalcode.org/project/drupal/-/blob/11.x/core/modules/media/media.libraries.yml#L15

• oembed.formatter
• oembed.frame

These libraries are attached in different places, but when a youtube video is use as remote video media, both are applied to the embedded iframe.

<iframe class="media-oembed-content">

/* core/oembed.formatter */

.media-oembed-content {
  max-width: 100%;
  border: none;
  background-color: transparent;
}

/* core/oembed.frame */

iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

To get the video to fill the area, a little extra css is needed.

.media-oembed-content {
  @apply aspect-video w-full h-auto;
}

Here it is after configuring and styling.