Atlas

Video

A self-hosted video player and an iframe wrapper for embedded ones, both cropped to a fixed aspect ratio.

<x-atlas::video> 

<x-atlas::video
    src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
    controls
/>
Preview follows the site's light/dark mode. Open standalone →

There are two tags. <x-atlas::video> is a real <video> element for files you host yourself; <x-atlas::video.embed> is an <iframe> for players you do not, such as YouTube or Vimeo. Neither declares a src prop — you set src as an ordinary attribute and it is merged onto the element.

Multiple encodings

The slot lands inside the <video>, above the captions track, so it is where <source> elements and fallback text belong. Offer WebM before MP4 and the browser takes the first format it understands. 

<x-atlas::video controls poster="https://picsum.photos/seed/atlas-video/640/360">
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">

    Your browser cannot play this video.
</x-atlas::video>
Preview follows the site's light/dark mode. Open standalone →

Aspect ratios

aspect works the same way as on image: an Atlas utility class plus object-fit: cover. The default of 16/9 suits most footage; a square crop is for a tile in a grid, and letting it fill the frame will cut the edges off anything shot in another ratio. 

<x-atlas::video
    src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
    aspect="1/1"
    controls
/>

<x-atlas::video
    src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
    aspect="16/9"
    controls
/>
Preview follows the site's light/dark mode. Open standalone →

Autoplay

Set autoplay without muted and the component adds muted for you, since every browser blocks unmuted autoplay anyway — better a video that plays silently than one that quietly refuses to start. Reserve this for decorative loops, and always leave the controls on anything a visitor is meant to watch. 

<x-atlas::video
    src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
    autoplay
    loop
    playsinline
/>
Preview follows the site's light/dark mode. Open standalone →
preload defaults to metadata, which fetches enough to know the duration and nothing more. Use none for a video far down a long page, and auto only when playback is the reason the visitor came.

Captions

The three caption-* attributes build a single <track>, marked default so it is on from the start. Only caption-src is required; the others fall back to en and "Captions". For more than one language, write the tracks yourself in the slot instead. 

<x-atlas::video
    src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/friday.mp4"
    caption-src="https://interactive-examples.mdn.mozilla.net/media/examples/friday.vtt"
    caption-srclang="en"
    caption-label="English"
    controls
/>
Preview follows the site's light/dark mode. Open standalone →

Embedded video

The embed tag ships the attributes an embedded player needs — fullscreen, autoplay and picture-in-picture permissions, a strict referrer policy and lazy loading — so you supply the URL and a title. Use each provider's embed URL, not the address from the browser bar. 

<x-atlas::video.embed
    src="https://www.youtube.com/embed/aqz-KE-bpKQ"
    title="Big Buck Bunny on YouTube"
/>
Preview follows the site's light/dark mode. Open standalone →

Image

One img tag, rendered by whichever driver fits the source: a URL, a WordPress attachment id, or nothing at all.

Swiper

A carousel built on Swiper 14: a track of slides with keyboard support, arrows and pagination, configured entirely from Blade props.

Reference

<x-atlas::video>

  • Name
    aspect
    Type
    1/1 | 2/3 | 3/4 | 4/5 | 3/2 | 4/3 | 16/9
    Default
    default: 16/9
    Description
    Ratio the player is cropped to. Pass an empty value to let the file decide its own shape.
  • Name
    preload
    Type
    none | metadata | auto
    Default
    default: metadata
    Description
    How much the browser fetches before playback. Anything outside these three values falls back to metadata.
  • Name
    caption-src
    Type
    string
    Default
    default: null
    Description
    URL of a WebVTT file. Its presence adds a default captions track.
  • Name
    caption-srclang
    Type
    string
    Default
    default: en
    Description
    Language of the captions track. Only read when caption-src is set.
  • Name
    caption-label
    Type
    string
    Default
    default: Captions
    Description
    Name the browser shows for the captions track in its own menu.

Slots

  • Name
    default
    Type
    slot
    Description
    Source elements and fallback content. Use it for multiple encodings, or set src on the tag for a single file.

<x-atlas::video.embed>

  • Name
    aspect
    Type
    1/1 | 2/3 | 3/4 | 4/5 | 3/2 | 4/3 | 16/9
    Default
    default: 16/9
    Description
    Ratio the iframe is cropped to.