UMD Web Components Library
    Preparing search index...

    Variable videoConst

    video: ComponentRegistration = ...

    Video Card

    A card component for displaying video content with configurable display formats and autoplay behavior. Supports both short-form (9:16) and block (1:1) aspect ratios.

    <umd-element-card-video>

    • video - Video element (required, accepts: video element)
    • data-display - Display format:
      • short - 9:16 aspect ratio (vertical video format) with hover/focus controls
      • Default - 1:1 aspect ratio (square format) with optional autoplay
    • data-visual-play - Autoplay behavior (only for default display):
      • true - Video autoplays when 25% visible in viewport
      • Default - No autoplay behavior
    • Maintains 9:16 aspect ratio (vertical video format)
    • Auto-plays (muted) on hover or focus
    • Auto-pauses when user moves away
    • Shows video controls with restricted features (no download, fullscreen, etc.)
    • Video covers entire card area with object-fit: cover
    • Maintains 1:1 aspect ratio (square format)
    • Optional autoplay when visible in viewport (data-visual-play="true")
    • No visible controls
    • Video loops continuously when playing
    <!-- Basic video card (square format) -->
    <umd-element-card-video>
      <video slot="video" src="campus-tour.mp4" poster="tour-thumb.jpg">
        <source src="campus-tour.mp4" type="video/mp4">
      </video>
    </umd-element-card-video>

    <!-- Short-form video card with hover controls -->
    <umd-element-card-video data-display="short">
      <video slot="video" poster="preview.jpg">
        <source src="student-life.webm" type="video/webm">
        <source src="student-life.mp4" type="video/mp4">
        Your browser does not support the video tag.
      </video>
    </umd-element-card-video>

    <!-- Video card with autoplay when visible -->
    <umd-element-card-video data-visual-play="true">
      <video slot="video" poster="athletics.jpg">
        <source src="athletics-highlight.mp4" type="video/mp4">
        <track kind="captions" src="captions.vtt" srclang="en" label="English">
      </video>
    </umd-element-card-video>

    1.12.0

    Settings

    Member Visibility

    On This Page

    Custom ElementSlotsAttributesVisual Behavior