Omnira Section reference › Showcase & media
Video banner "type": "video"
A full-width photo with a large play button that opens a YouTube or Vimeo video in a pop-up, plus an optional title, text and buttons. Use it for a brand film, a tour or a product demo.
Example#
Paste this into the sections list of a page file:
JSON
{
"type": "video",
"image": "placeholder",
"video": "https://www.youtube.com/embed/aqz-KE-bpKQ",
"title": "See how we build, from the first sketch to the last brick",
"text": "A two-minute look behind the scenes of our Lakeside House project.",
"overlay": 0.55
}Options#
| Option | Type | Default | Description |
|---|---|---|---|
image | string | — | Background photo. Required: without it the banner is just a dark block. |
video | string | — | Embed URL of the video, e.g. "https://www.youtube.com/embed/VIDEO_ID" or "https://player.vimeo.com/video/VIDEO_ID". |
title | string | — | Heading under the play button. |
text | string | — | Short paragraph under the title. |
overlay | number | 0.5 | Darkness of the layer over the photo. 0 = none, 1 = black. Values: 0 - 1 |
buttons | array | — | Buttons under the text. See the "buttons" fields. |
tone | string | dark | Common option; this section defaults it to "dark" (white text). Values: light | alt | dark | primary |
padding | string | lg | Common option; this section defaults it to "lg". Values: none | sm | md | lg |
Also accepts the options every section accepts: id, tone, padding, fluid, class, hidden.
Fields of each entry in buttons#
| Option | Type | Default | Description |
|---|---|---|---|
label | string | — | Button text. A button without a label is not shown. |
href | string | — | Link address, e.g. "contact.html" or "#pricing". Default "#". |
style | string | — | primary (default) | outline | light | dark | accent | link. "link" is a text link with an arrow. |
icon | string | — | Bootstrap Icons name shown after the label, without "bi-" (e.g. "arrow-right"). |
video | string | — | A YouTube/Vimeo embed URL. The button then opens the video in a pop-up instead of following href. |
Tips#
- Use the embed address, not the normal page address. For YouTube, change "https://www.youtube.com/watch?v=aqz-KE-bpKQ" to "https://www.youtube.com/embed/aqz-KE-bpKQ". A normal "watch" link will not play in the pop-up.
- The video starts playing automatically when the pop-up opens and stops when it closes.
- Keep "tone" dark (the default) so the text stays white on the photo.
Editing it in the HTML files#
The video address is the data-video attribute of a.play-btn. The photo is the background-image in the style of .cta-bg, and the darkness is the opacity of .hero-overlay.
Where it's used#
Open these pages in template/ to see it working:
- Creative Agency:
template/creative-agency/home-2.html(sourcesrc/demos/creative-agency/pages/home-2.json) - Corporate:
template/corporate/home-2.html(sourcesrc/demos/corporate/pages/home-2.json) - Finance:
template/finance/testimonials.html(sourcesrc/demos/finance/pages/testimonials.json) - Law Firm:
template/law-firm/index.html(sourcesrc/demos/law-firm/pages/index.json) - SaaS Product:
template/saas/home-2.html(sourcesrc/demos/saas/pages/home-2.json) - Mobile App:
template/mobile-app/home-2.html(sourcesrc/demos/mobile-app/pages/home-2.json) - Tech Conference:
template/conference/gallery.html(sourcesrc/demos/conference/pages/gallery.json) - Restaurant:
template/restaurant/index.html(sourcesrc/demos/restaurant/pages/index.json) - Hotel & Resort:
template/hotel/index.html(sourcesrc/demos/hotel/pages/index.json) - Gym & Fitness:
template/gym/home-2.html(sourcesrc/demos/gym/pages/home-2.json) - Yoga Studio:
template/yoga/home-2.html(sourcesrc/demos/yoga/pages/home-2.json) - Day Spa & Salon:
template/spa/home-2.html(sourcesrc/demos/spa/pages/home-2.json) - Medical Clinic:
template/medical/home-2.html(sourcesrc/demos/medical/pages/home-2.json) - Dental Clinic:
template/dental/home-2.html(sourcesrc/demos/dental/pages/home-2.json) - Construction:
template/construction/testimonials.html(sourcesrc/demos/construction/pages/testimonials.json) - Car Dealer:
template/car-dealer/testimonials.html(sourcesrc/demos/car-dealer/pages/testimonials.json) - Travel Agency:
template/travel/index.html(sourcesrc/demos/travel/pages/index.json) - Photographer:
template/photography/index.html(sourcesrc/demos/photography/pages/index.json) - Music Festival:
template/music-festival/gallery.html(sourcesrc/demos/music-festival/pages/gallery.json) - Fashion Store:
template/fashion-store/home-2.html(sourcesrc/demos/fashion-store/pages/home-2.json)