The HTML installation snippet for the background-video preset (generated on /docs/framework/html/how-to/installation) does not render visibly when copy-pasted into an empty page.
background-video-player is display: contents and background-video-skin is width: 100%; height: 100%, so the rendered size is dictated by the skin's containing block. Pasting the snippet into a fresh <body> (default height: auto) collapses the skin to 0×0. The other presets hide this because <video> has intrinsic dimensions; the background renderer suppresses that, so the parent must size it.
A friction-log copy-paste should produce a visible result. Three possible approaches, ordered lightest to heaviest:
- Docs-only note next to the snippet. Add a short aside when
preset=background-video explaining that an ancestor must be sized, with two example layouts (full-bleed position: fixed; inset: 0 and aspect-ratio container).
- Make the generated snippet self-contained. Wrap the markup in a sized container (e.g.
<div style="position: fixed; inset: 0">) inside site/src/utils/installation/codegen.ts. Solves copy-paste but commits the docs to one layout (full-bleed) which may not match the user's intent (inline hero, card, etc.).
- Ship a sensible default in
background/skin.css. E.g. give the player display: block; position: relative; width: 100%; aspect-ratio: 16/9. Most invasive — a breaking change for existing consumers who already wrap with their own sizing.
Looking for opinions on which direction to take. My current lean is (1) plus a small "two layouts" snippet block, since (2) over-commits the example and (3) is a behavior change.
Context
The HTML installation snippet for the
background-videopreset (generated on/docs/framework/html/how-to/installation) does not render visibly when copy-pasted into an empty page.background-video-playerisdisplay: contentsandbackground-video-skiniswidth: 100%; height: 100%, so the rendered size is dictated by the skin's containing block. Pasting the snippet into a fresh<body>(defaultheight: auto) collapses the skin to 0×0. The other presets hide this because<video>has intrinsic dimensions; the background renderer suppresses that, so the parent must size it.A friction-log copy-paste should produce a visible result. Three possible approaches, ordered lightest to heaviest:
preset=background-videoexplaining that an ancestor must be sized, with two example layouts (full-bleedposition: fixed; inset: 0and aspect-ratio container).<div style="position: fixed; inset: 0">) insidesite/src/utils/installation/codegen.ts. Solves copy-paste but commits the docs to one layout (full-bleed) which may not match the user's intent (inline hero, card, etc.).background/skin.css. E.g. give the playerdisplay: block; position: relative; width: 100%; aspect-ratio: 16/9. Most invasive — a breaking change for existing consumers who already wrap with their own sizing.Looking for opinions on which direction to take. My current lean is (1) plus a small "two layouts" snippet block, since (2) over-commits the example and (3) is a behavior change.
Context
generateHTMLMarkup