{"templateId":"markdown","sharedDataIds":{},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"FeaturedVideoHero Pattern","siteUrl":"https://xrpl.org","llmstxt":{"hide":false,"title":"XRPL Developer Portal & Documentation","description":"Explore XRP Ledger documentation, blogs, and other blockchain developer resources needed to start building and integrating with the ledger.","details":{"content":"XRP Ledger concepts, use cases, tutorials, references, and other blockchain developer resources. Also, stay up to date with release announcements and more through the XRPL Blog."},"sections":[{"title":"Introduction","description":"A high-level introduction to the XRP Ledger.","includeFiles":["docs/introduction/**/*.*","about/faq.md"],"excludeFiles":["docs/introduction/index.md"]},{"title":"Use Cases","description":"Real-world applications and business scenarios for the XRP Ledger.","includeFiles":["docs/use-cases/**/*.*"],"excludeFiles":["docs/use-cases/index.md","docs/use-cases/defi/index.md"]},{"title":"Agentic Transactions","description":"XRPL AI Starter Kit to help autonomous agents discover, set up, and execute agentic transactions on the XRP Ledger.","includeFiles":["docs/agents/**/*.*"]},{"title":"Concepts","description":"Core concepts including accounts, tokens, transactions, consensus, and more.","includeFiles":["docs/concepts/**/*.*"],"excludeFiles":["docs/concepts/index.md","docs/concepts/decentralized-storage/index.md","docs/concepts/payment-types/index.md"]},{"title":"Tutorials","description":"Step-by-step guides for building on the XRP Ledger in JavaScript, Python, Go, and more.","includeFiles":["docs/tutorials/**/*.*"]},{"title":"References","description":"Protocol specification, transaction types, ledger entries, and API methods.","includeFiles":["docs/references/**/*.*"],"excludeFiles":["docs/references/xrp-api.md","docs/references/data-api.md","docs/references/protocol/index.md","docs/references/protocol/ledger-data/ledger-entry-types/index.md","docs/references/protocol/transactions/index.md","docs/references/protocol/transactions/types/index.md","docs/references/http-websocket-apis/api-conventions/index.md","docs/references/http-websocket-apis/public-api-methods/*/index.md","docs/references/http-websocket-apis/admin-api-methods/*/index.md"]},{"title":"Infrastructure","description":"Install, configure, and troubleshoot xrpld and Clio servers.","includeFiles":["docs/infrastructure/**/*.*"],"excludeFiles":["docs/infrastructure/index.md","docs/infrastructure/*/index.md","docs/infrastructure/installation/build-run-xrpld-in-reporting-mode.md","docs/infrastructure/configuration/data-retention/index.md","docs/infrastructure/configuration/server-modes/index.md"]},{"title":"Blog (2023+)","description":"Recent XRPL Blog posts (showing 2023 and newer).","includeFiles":["blog/2023/**/*.*","blog/2024/**/*.*","blog/2025/**/*.*","blog/2026/**/*.*"]},{"title":"Resources","description":"Developer resources and contribution guidelines.","includeFiles":["resources/**/*.*"]}]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"featuredvideohero-pattern","__idx":0},"children":["FeaturedVideoHero Pattern"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A page-level hero pattern featuring a headline, optional subtitle, call-to-action buttons, and a featured video. The video uses native HTML ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<video>"]}," props and is displayed in a responsive two-column layout with content on the left and video on the right."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"overview","__idx":1},"children":["Overview"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The FeaturedVideoHero component provides a structured hero section with:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Responsive two-column layout (content left, video right) that stacks on smaller screens"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Required headline and video; optional subtitle and call-to-action buttons"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Design-constrained CTAs: primary and optional secondary, with variant and color set by the component"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Development-time validation: returns ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]}," when required props are missing and logs warnings in development/test"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"basic-usage","__idx":2},"children":["Basic Usage"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"import { FeaturedVideoHero } from \"shared/sections/FeaturedVideoHero\";\n\nfunction MyPage() {\n  return (\n    <FeaturedVideoHero\n      headline=\"Build on XRPL\"\n      subtitle={\n        <p>\n          Issue, manage, and trade real-world assets without needing to build\n          smart contracts.\n        </p>\n      }\n      links={[{ label: \"Get Started\", href: \"/docs\" }]}\n      videoElement={{\n        src: \"/video/intro.mp4\",\n        autoPlay: true,\n        loop: true,\n        muted: true,\n        playsInline: true,\n      }}\n    />\n  );\n}\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"props","__idx":3},"children":["Props"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Prop"},"children":["Prop"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Type"},"children":["Type"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Required"},"children":["Required"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["headline"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["React.ReactNode"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Yes"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Hero headline text (h-md typography)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["subtitle"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["React.ReactNode"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Hero subtitle content"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["links"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["DesignConstrainedLink[]"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Array of ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["{ label, href }"]}," for ButtonGroup. Omit to hide button section."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["videoElement"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["DesignConstrainedVideoProps"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Yes"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Native ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<video>"]}," element props (e.g. ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["src"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["autoPlay"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["loop"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["muted"]},")"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["className"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Additional CSS classes for the header element"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["...rest"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["HTMLHeaderElement"]}," attributes"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Any other HTML header attributes"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"links-buttongroup","__idx":4},"children":["Links (ButtonGroup)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["links"]}," prop is optional. When provided, at least one non-empty link (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["label"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["href"]},") is required to show the button section. Uses ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["{ label, href }"]}," format for consistent ButtonGroup rendering; emphasis is set by the component:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Max 2 links: first ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["strong"]},", second ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["subtle"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"video-element","__idx":5},"children":["Video Element"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["videoElement"]}," accepts native HTML video element props. Required and commonly used props:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["src"]}," (required) – Video URL"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["autoPlay"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["loop"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["muted"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["playsInline"]}," – Typical for background/hero autoplay"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["controls"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["preload"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["poster"]}," – Optional; use for user-controlled playback"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The video is rendered with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["object-fit: cover"]}," and a 16:9 aspect ratio container."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":6},"children":["Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"with-primary-and-secondary-ctas","__idx":7},"children":["With primary and secondary CTAs"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<FeaturedVideoHero\n  headline=\"Real-world asset tokenization\"\n  subtitle=\"Learn how to issue crypto tokens and build tokenization solutions.\"\n  links={[\n    { label: \"Get Started\", href: \"/docs\" },\n    { label: \"Learn More\", href: \"/about\" },\n  ]}\n  videoElement={{\n    src: \"/video/tokenization.mp4\",\n    autoPlay: true,\n    loop: true,\n    muted: true,\n    playsInline: true,\n  }}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"without-subtitle","__idx":8},"children":["Without subtitle"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<FeaturedVideoHero\n  headline=\"Headline Only\"\n  links={[{ label: \"Get Started\", href: \"/docs\" }]}\n  videoElement={{\n    src: \"/video/intro.mp4\",\n    autoPlay: true,\n    loop: true,\n    muted: true,\n    playsInline: true,\n  }}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"with-video-controls","__idx":9},"children":["With video controls"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"<FeaturedVideoHero\n  headline=\"Watch and Learn\"\n  subtitle=\"Explore our video tutorials and guides.\"\n  links={[{ label: \"Watch Tutorials\", href: \"/tutorials\" }]}\n  videoElement={{\n    src: \"/video/intro.mp4\",\n    autoPlay: false,\n    loop: true,\n    muted: true,\n    playsInline: true,\n    controls: true,\n    preload: \"metadata\",\n  }}\n/>\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"validation","__idx":10},"children":["Validation"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Required props"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["headline"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["videoElement"]},". If either is missing or empty, the component returns ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]}," and (in development/test) logs a console warning."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Optional props"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["subtitle"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["links"]},". Omit ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["links"]}," or pass an empty array to hide the button section."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"responsive-behavior","__idx":11},"children":["Responsive Behavior"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Mobile / small screens"]},": Content and video stack vertically; video appears below the content block with top margin."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Large (lg+)"]},": Two-column layout: content (5 cols) on the left, video (6 cols, offset 1) on the right. Video container uses 16:9 aspect ratio and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["object-fit: cover"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"css-classes","__idx":12},"children":["CSS Classes"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-featured-video-hero"]}," – Root header element"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-featured-video-hero__content"]}," – Content column (headline, subtitle, CTAs)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-featured-video-hero__title"]}," – Headline (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["h1"]},")"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-featured-video-hero__subtitle"]}," – Subtitle row"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-featured-video-hero__subtitle-col"]}," – Subtitle column"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-featured-video-hero__cta-buttons"]}," – CTA buttons wrapper"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-featured-video-hero__video-container"]}," – Video wrapper (16:9)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-featured-video-hero__video"]}," – Video element"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"best-practices","__idx":13},"children":["Best Practices"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Video format"]},": Use MP4 with H.264 for broad compatibility; keep file sizes reasonable for fast loading."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Autoplay"]},": Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["muted"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["playsInline"]}," with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["autoPlay"]}," for reliable autoplay on mobile."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["CTAs"]},": Keep CTA text concise and action-oriented; primary CTA should be the main action."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Headlines"]},": Keep headlines concise; use the subtitle for additional context."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Accessibility"]},": Provide an ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["aria-label"]}," (or other accessible name) on the video when it conveys meaningful content."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"showcase","__idx":14},"children":["Showcase"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["An interactive showcase with more examples and prop documentation is available at:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Showcase page"]},": ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["/about/featured-video-hero-showcase.page.tsx"]}]}]}]},"headings":[{"value":"FeaturedVideoHero Pattern","id":"featuredvideohero-pattern","depth":1},{"value":"Overview","id":"overview","depth":2},{"value":"Basic Usage","id":"basic-usage","depth":2},{"value":"Props","id":"props","depth":2},{"value":"Links (ButtonGroup)","id":"links-buttongroup","depth":3},{"value":"Video Element","id":"video-element","depth":3},{"value":"Examples","id":"examples","depth":2},{"value":"With primary and secondary CTAs","id":"with-primary-and-secondary-ctas","depth":3},{"value":"Without subtitle","id":"without-subtitle","depth":3},{"value":"With video controls","id":"with-video-controls","depth":3},{"value":"Validation","id":"validation","depth":2},{"value":"Responsive Behavior","id":"responsive-behavior","depth":2},{"value":"CSS Classes","id":"css-classes","depth":2},{"value":"Best Practices","id":"best-practices","depth":2},{"value":"Showcase","id":"showcase","depth":2}],"frontmatter":{"seo":{"title":"FeaturedVideoHero Pattern"}},"editPage":{"to":"https://github.com/XRPLF/xrpl-dev-portal/tree/master/shared/sections/FeaturedVideoHero/README.md"},"lastModified":"2026-08-25T04:24:09.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/es-es/shared/sections/featuredvideohero/readme","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}