Video component · Hyper Elements

import { Video } from "@hyper-elements/react";

Example

Watch the keynote (https://www.youtube.com/watch?v=eCHaiEjCDFM)

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"></head><body style="margin:0;background-color:#fff"><main style="max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:16px;overflow-wrap:break-word;color:#0f172a;font-family:Inter, Helvetica, Arial, sans-serif;font-size:16px;font-weight:400;font-style:normal;line-height:1.5;letter-spacing:0;text-align:left;text-transform:none"><div style="display:flex;flex-direction:column;gap:16px;box-sizing:border-box;padding:24px"><div><div style="position:relative;height:0;padding-bottom:56.25%;overflow:hidden"><iframe src="https://www.youtube.com/embed/eCHaiEjCDFM" title="Watch the keynote" allow="autoplay; encrypted-media; picture-in-picture" allowfullscreen="" loading="lazy" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0"></iframe></div></div></div></main></body></html>

Show the code

video.tsx

import { Column, Page, Video } from "@hyper-elements/react";

export default function Example() {
  return (
    <Page width={520} style={{ backgroundColor: "#ffffff", fontFamily: "Inter, Helvetica, Arial, sans-serif", color: "#0f172a", gap: 16 }}>
      <Column style={{ padding: 24, gap: 16 }}>
        <Video
          src="https://www.youtube.com/watch?v=eCHaiEjCDFM"
          title="Watch the keynote"
        />
      </Column>
    </Page>
  );
}

Reference

A YouTube or Vimeo video: its player on a page; in an email (which can’t play one), its thumbnail, linked to it.

Holds: nothing. Drawn in: email, page.

Props:

src: video (required). The video’s YouTube or Vimeo link.
thumbnail: asset. The image an email shows, linked to the video. A YouTube video’s own where there’s none; a Vimeo video’s can’t be found without the network.
title: text (default "Video"). The player’s title on a page, the thumbnail’s alternate text in an email.

style:

width: a length (a number of px, %)
maxWidth: a length (a number of px, %)
flex: flex. In a Row: its share of the width left after children with a width (default 1); “none” takes its own size.

mobile (on phones): width, maxWidth.