Hero With YouTube Embed

Embed a responsive YouTube player with html: and Bootstrap’s ratio helper around the iframe so the video keeps a 16:9 frame at any width.

Replace VIDEO_ID with your video’s id from the YouTube URL (youtube.com/watch?v=VIDEO_ID).

html: can be indented under col: like any other element, and can span several lines; see Components & Aliases — HTML for where a multi-line block ends.

//// column

[site]
title: Demo landing

[nav]
Home -> /

[Home -> /]

/// hero align:center
//// column
html: <div class="ratio ratio-16x9"><iframe src="https://www.youtube.com/embed/VIDEO_ID" title="Product demo" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen loading="lazy"></iframe></div>
//// column
h1: See it in action
p: Two-minute walkthrough of the product. No signup required to watch.
button: Get started -> /signup
btn-secondary: Pricing -> /pricing

col:

The same layout using col: markers (the style used in many CLI templates). Put each col: on its own line; the block runs until the next col:.

[site]
title: Demo landing

[nav]
Home -> /

[Home -> /]

/// hero align:center
col:
html: <div class="ratio ratio-16x9"><iframe src="https://www.youtube.com/embed/VIDEO_ID" title="Product demo" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen loading="lazy"></iframe></div>
col:
  h1: See it in action
  p: Two-minute walkthrough of the product. No signup required to watch.
  button: Get started -> /signup
  btn-secondary: Pricing -> /pricing

Copy into a project at app.micropage.sh, then Publish.

align:center keeps the text block vertically centered next to the video. For more on raw HTML in sections, see Components & Aliases — HTML.