Embed a video on any website

• Iframe: works anywhere that accepts HTML, such as a CMS, a docs site or a landing page builder. No code on your side.
• Script tag: adds a <fileboy-player> element to your own page. Good when you control the page and want the player to sit in your layout. It works the same in React, Vue or any other framework.
• A link: for places that cannot run anything, like email.

Every option plays the same adaptive stream, with the same quality menu and captions. The video has to be ready first: a video still encoding shows a waiting message.

Each video's page in the dashboard shows this code with its id filled in. Paste it where the video should appear.

<iframe
  src="https://fileboy.io/video/embed/YOUR_VIDEO_ID"
  width="560"
  height="315"
  frameborder="0"
  allow="autoplay; fullscreen; picture-in-picture"
  allowfullscreen
></iframe>

To make it fill the width of its column and keep a 16 by 9 shape, wrap it:

<div style="position: relative; aspect-ratio: 16 / 9; max-width: 720px;">
  <iframe
    src="https://fileboy.io/video/embed/YOUR_VIDEO_ID"
    style="position: absolute; inset: 0; width: 100%; height: 100%; border: 0;"
    allow="autoplay; fullscreen; picture-in-picture"
    allowfullscreen
  ></iframe>
</div>

On your own pages, load the player script once and add an element with the video id. It takes autoplay, loop, muted and height attributes, like a <video>. Without height it keeps a 16 by 9 shape.

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@cd2/fileboy-player@1.2.0/dist/fileboy-player.js"
></script>

<fileboy-player video-id="YOUR_VIDEO_ID" height="360"></fileboy-player>

• Browsers usually block autoplay with sound until the viewer has interacted with the page, so do not rely on autoplay for a video that has audio. Add muted if it should start on its own.
• The iframe needs allow="autoplay; fullscreen" for fullscreen and autoplay to be permitted at all.
• Set the size on the iframe or its wrapper, not inside the video. The player fills whatever box it is given.

Email clients, chat messages and some feeds strip iframes and scripts. Link to a page that plays the video, and use the poster image as the thumbnail so it still looks like a video.

<a href="https://fileboy.io/video/watch/YOUR_VIDEO_ID">
  <img
    src="https://api.fileboy.io/videos/YOUR_VIDEO_ID/poster"
    alt="Watch the launch video"
    width="560"
  />
</a>

Anyone who has a video's id can play it, with or without the embed. Treat ids like unlisted links. For private training video behind a login, turn on signed URLs for the app and sign each video on your server; there is no DRM.