Edit Background Video

Name

Also known as (comma separated)

Brief definition Ambient video used as a section background.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "heading", "type": "text", "label": "Heading", "default": "Field notes, in motion" }, { "id": "overlayOpacity", "type": "number", "label": "Overlay opacity", "default": 45, "min": 0, "max": 90, "step": 5 }, { "id": "overlayColor", "type": "color", "label": "Overlay colour", "default": "#241430", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "speed", "type": "select", "label": "Motion speed", "default": "normal", "options": [ "slow", "normal", "fast" ] } ]

Templates (JSON object keyed by format) { "html": "<section class=\"bg-video bg-video--{{speed}}\">\n <video class=\"bg-video__el\" autoplay muted loop playsinline poster=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='225'%3E%3Crect width='400' height='225' fill='%23241430'/%3E%3Ccircle cx='320' cy='40' r='90' fill='%23A8E6C1' opacity='0.5'/%3E%3Ccircle cx='60' cy='180' r='110' fill='%23BFD9F2' opacity='0.35'/%3E%3C/svg%3E\" aria-hidden=\"true\">\n <!-- Provide a real <source src=\"your-video.mp4\" type=\"video/mp4\"> for playback -->\n </video>\n <div class=\"bg-video__scrim\" style=\"background:{{overlayColor}};opacity:{{overlayOpacity}}%;\"></div>\n <div class=\"bg-video__content\">\n <h2 class=\"bg-video__heading\">{{heading}}</h2>\n <span class=\"bg-video__badge\">{{speed}} motion</span>\n </div>\n</section>\n<style>\n.bg-video { position: relative; max-width: 360px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #241430; }\n.bg-video__el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }\n.bg-video__scrim { position: absolute; inset: 0; }\n.bg-video__content { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 16px; color: #FAF7F2; }\n.bg-video__heading { margin: 0; font: 700 20px/1.2 system-ui, sans-serif; }\n.bg-video__badge { align-self: flex-start; padding: 3px 8px; border-radius: 999px; background: #FAF7F2; color: #241430; font: 600 11px/1.4 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .04em; }\n@media (prefers-reduced-motion: no-preference) {\n.bg-video--slow .bg-video__badge { animation: bgv-pulse 3s ease-in-out infinite; }\n.bg-video--normal .bg-video__badge { animation: bgv-pulse 1.6s ease-in-out infinite; }\n.bg-video--fast .bg-video__badge { animation: bgv-pulse .8s ease-in-out infinite; }\n}\n@keyframes bgv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }\n</style>", "tailwind": "<section class=\"bg-video-tw bg-video-tw--{{speed}} relative max-w-[360px] overflow-hidden rounded-xl bg-[#241430]\" style=\"aspect-ratio:16/9;\">\n <video class=\"absolute inset-0 w-full h-full object-cover\" autoplay muted loop playsinline poster=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='225'%3E%3Crect width='400' height='225' fill='%23241430'/%3E%3Ccircle cx='320' cy='40' r='90' fill='%23A8E6C1' opacity='0.5'/%3E%3Ccircle cx='60' cy='180' r='110' fill='%23BFD9F2' opacity='0.35'/%3E%3C/svg%3E\" aria-hidden=\"true\">\n <!-- Provide a real <source src=\"your-video.mp4\" type=\"video/mp4\"> for playback -->\n </video>\n <div class=\"absolute inset-0\" style=\"background:{{overlayColor}};opacity:{{overlayOpacity}}%;\"></div>\n <div class=\"relative h-full flex flex-col justify-end gap-2 p-4 text-[#FAF7F2]\">\n <h2 class=\"m-0 text-xl font-bold\">{{heading}}</h2>\n <span class=\"self-start px-2 py-0.5 rounded-full bg-[#FAF7F2] text-[#241430] text-[11px] font-semibold uppercase tracking-wide\">{{speed}} motion</span>\n </div>\n</section>\n<style>\n@media (prefers-reduced-motion: no-preference) {\n.bg-video-tw--slow span { animation: bgv-tw-pulse 3s ease-in-out infinite; }\n.bg-video-tw--normal span { animation: bgv-tw-pulse 1.6s ease-in-out infinite; }\n.bg-video-tw--fast span { animation: bgv-tw-pulse .8s ease-in-out infinite; }\n}\n@keyframes bgv-tw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }\n</style>", "react": "export function BackgroundVideo({\n heading = \"{{heading}}\",\n overlayOpacity = {{overlayOpacity}},\n overlayColor = \"{{overlayColor}}\",\n speed = \"{{speed}}\",\n}) {\n const duration = { slow: \"3s\", normal: \"1.6s\", fast: \".8s\" }[speed] ?? \"1.6s\";\n return (\n <section style={{ position: \"relative\", maxWidth: 360, aspectRatio: \"16 / 9\", overflow: \"hidden\",\n borderRadius: 12, background: \"#241430\" }}>\n <video\n style={{ position: \"absolute\", inset: 0, width: \"100%\", height: \"100%\", objectFit: \"cover\" }}\n autoPlay muted loop playsInline\n poster=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='225'%3E%3Crect width='400' height='225' fill='%23241430'/%3E%3Ccircle cx='320' cy='40' r='90' fill='%23A8E6C1' opacity='0.5'/%3E%3Ccircle cx='60' cy='180' r='110' fill='%23BFD9F2' opacity='0.35'/%3E%3C/svg%3E\"\n aria-hidden=\"true\"\n >\n {/* Provide a real <source src=\"your-video.mp4\" type=\"video/mp4\" /> for playback */}\n </video>\n <div style={{ position: \"absolute\", inset: 0, background: overlayColor, opacity: overlayOpacity / 100 }} />\n <div style={{ position: \"relative\", height: \"100%\", display: \"flex\", flexDirection: \"column\",\n justifyContent: \"flex-end\", gap: 8, padding: 16, color: \"#FAF7F2\" }}>\n <h2 style={{ margin: 0, font: \"700 20px/1.2 system-ui, sans-serif\" }}>{heading}</h2>\n <span className=\"bgv-badge\" style={{ alignSelf: \"flex-start\", padding: \"3px 8px\", borderRadius: 999, background: \"#FAF7F2\",\n color: \"#241430\", font: \"600 11px/1.4 system-ui, sans-serif\", textTransform: \"uppercase\",\n letterSpacing: \".04em\" }}>\n {speed} motion\n </span>\n </div>\n <style>{`\n @media (prefers-reduced-motion: no-preference) {\n .bgv-badge { animation: bgv-pulse ${duration} ease-in-out infinite; }\n @keyframes bgv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }\n }\n `}</style>\n </section>\n );\n}" }