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: must start at the beginning of the line (no leading spaces or tabs). If you indent it—for example under col:—Micropage will not treat it as inline HTML. Other elements under col: can still use indentation; see Components & Aliases — HTML.

`//// 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:. Keep the html: line flush left, as above.

[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

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

//// column​

col:​

`//// column`

`col:`