Start here

Getting started

Fideo gives one consistent player UI and one JavaScript API to HTML5 video, YouTube, Vimeo and Wistia. It has no dependencies, ships around 15 KB gzipped, and can be driven entirely from markup.

Mounted from markup aloneauto-init

Install

Fideo is not on the npm registry yet. Use the CDN build, install straight from GitHub, or drop the compiled files into your project — the dist/ folder is committed to the repository for exactly that.

CDN

The quickest path, and the one that needs no build step at all.

Pinned to a releasehtml

<script src="https://cdn.jsdelivr.net/gh/devjtv/fideo-js@v0.7.0/dist/fideo.global.js"></script>

Pin the version. jsDelivr will serve a moving target if you leave the tag off. The snippet above is pinned to , the release these docs were built from.

npm, from GitHub

Compiled files are committed, so this just worksbash

npm install github:devjtv/fideo-js

Download

Copy what you need out of dist/ and serve it yourself.

File	Use
fideo.global.js	Browser global. Defines `Fideo`, `initFideo`, `createFideo` and `mountFideo` on `window`.
fideo.js	ES module build.
fideo.umd.cjs	UMD / CommonJS build.
fideo.css	Wrapper styles. Optional — see below.
index.d.ts	TypeScript declarations.

Your first player

Add data-fideo to a normal <video>. Loaded as a classic script, Fideo finds it on DOMContentLoaded and mounts it. That is the whole integration.

No JavaScript of your ownhtml

<script src="https://cdn.jsdelivr.net/gh/devjtv/fideo-js@v0.7.0/dist/fideo.global.js"></script>

<video
  data-fideo
  src="/media/clip.mp4"
  data-fideo-poster="/media/poster.jpg"
  data-fideo-muted
  data-fideo-loop
  playsinline
></video>

An embed works the same way — swap the tag and give it a provider URL. Fideo works out which provider it is.

Provider inferred from the URLhtml

<iframe data-fideo src="https://www.youtube.com/watch?v=pb-j3svRQLI"></iframe>

With JavaScript

When you need a handle on the player, mount it yourself. Every entry point takes the same options object.

ES modulejs

import { Fideo, initFideo } from 'fideo-js';

// Mount everything matching [data-fideo]
initFideo();

// Or one player, with a reference you keep
const player = new Fideo('#hero-video', {
  muted: true,
  loop: true,
  autoplay: true,
});

await player.play();

There are five ways to initialize a player and they each suit a different situation. Initializing walks through all of them, each one running live.

About the stylesheet

Fideo splits its CSS in two. The control bar renders inside a shadow root and always carries its own styles. The wrapper styles live in the page, and the script injects them on first mount — so a bare <script> tag produces a correct player with no <link> to forget.

Situation	What to do
Default	Nothing. Wrapper styles are injected on first mount.
You ship your own wrapper CSS	Pass `injectStyles: false` and link or bundle `dist/fideo.css` yourself.
Your build pipeline wants the CSS as a file	Import or link `dist/fideo.css`. Injection is idempotent, so there is no conflict.

There is nothing to style before the script runs. Every selector in the wrapper stylesheet targets markup Fideo generates at mount, and injection happens before that markup is inserted — so linking the stylesheet cannot prevent a flash, because there is none to prevent.

Injected styles are prepended to <head>. Your own stylesheets come later in the cascade and therefore win, so overriding anything on .fideo works as you would expect.