Video

Responsive embed or native video

An embedded video — a trailer from YouTube or Vimeo (an iframe), or your own file (native). title names the frame; it's required.

Basic

<script setup lang="ts">
import { BlessVideo } from "blessing-ui";
</script>

<template>
  <div class="row" style="align-items: flex-start">
    <BlessVideo
      src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ"
      title="Trailer"
      style="width: 360px"
    />
    <BlessVideo
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
      title="Sample"
      native
      ratio="4 / 3"
      style="width: 240px"
    />
  </div>
</template>

• With native, put <track kind="captions"> (and <source>s) in the default slot. Caption spoken content; it's the accessible way in for many people.
• ratio keeps the frame's shape before the player loads.

Usage

import { BlessVideo } from "blessing-ui";

API

Props

Name	Type	Default	Description
src*	string	—	iframe URL (YouTube / Vimeo embed, etc.) or a video file
title*	string	—
ratio	string | number	"16 / 9"
native	boolean	false	true = <video>, false = <iframe>
poster	string	—

Slots

Name	Scope	Description
default	—