Video demos

Video Modal

While large thumbnails can play video inline, sometimes we might want to have a small thumbnail that open the video in a modal.

Usage

import { createPlayer } from './player.js';

createPlayer(document.getElementById('myPlayer'), {
  src:          'video.mp4',
  thumb:        'thumb.png',
  title:        'How Your Income Flows',
  playInline:   true,
  hoverContent: '<button class="VideoHoverButton">Ask AI</button>',
  endContent:   '<div class="end-card">...</div>',
});

Guidelines

  • Videos have a playInline flag. When false, the video opens in a modal.
  • Titles should be avoided when playInline is false.
  • Videos can have hoverContent — displayed when hovering over the video.

Nice to have

  • There is a notion of a focused player so that pressing Space only toggles playback of the focused video.
  • Clicking play on a video will pause any other playing video on the page.