Using videos on other sites

Your website can use the videos of your Kitset site in two ways. It can show a video with its embed code, or it can play the files in its own player.

Embed a video

1. In the Library, right-click the video and choose Copy Embed Code. The edit window of the video also has Copy Embed Code, in the Embed row.
2. Paste the code into the HTML of your page. Most site builders have an HTML block or an embed block for this.

The code is a frame with only the player:

<iframe src="https://watch.example.com/_embed?v=summer-launch" title="Summer Launch" loading="lazy" allow="autoplay; fullscreen; picture-in-picture" style="display:block;width:100%;aspect-ratio:1920/1080;border:0" allowfullscreen></iframe>

• The frame is as wide as the space on your page, and its height follows the shape of the video.
• The player has the player settings and the fonts of your site.
• The frame loads only when a person scrolls near it.
• The address does not change when you change the page folder, replace the video or change its subtitles.
• A change from public to unlisted moves the video to a new address, so its embeds stop working. See Change the visibility.
• A browser can keep an embed for up to an hour, so a change of the settings can take that long to show in it.

File ▸ Export CSV… gives the embed code of every video. See Export a list of the videos.

Choose the sites that can embed your videos

1. Open Site Settings ▸ Embedding.
2. Under Embeds, choose Any Site, Only These Sites or None.
3. For Only These Sites, enter the address of each website, for example https://www.example.com, and click Add.
4. Click Save.

A new site starts with Any Site. None stops all embeds, and Kitset keeps your list of sites, so you can choose Only These Sites again later. The setting also applies to the player pages and the home page in a frame.

• Enter each address that your pages use. https://example.com and https://www.example.com are two different sites.
• You can paste a full address. Kitset keeps only the scheme, the hostname and the port.

Anyone who has the link of a video can watch it, so a list does not make a video private. It only stops other websites from showing your videos in a frame.

The daily limit of the Workers Free plan

Each load of an embed or of a player page is one request to the page Worker of your site. The Cloudflare Workers Free plan includes 100,000 requests each day. After that, Cloudflare can show an error in place of the pages and the embeds until midnight UTC. A video that already plays continues to play.

A busy site can need the Workers Paid plan. See Cloudflare Workers pricing.

Use your own player

Your own player needs the address of your website in the list of other players.

The list of other players

1. Open Site Settings ▸ Embedding.
2. Under Other Players, enter the address of your website, for example https://www.example.com, and click Add.
3. Click Save, and confirm with Touch ID.

A player on a site in the list can read the video files. An embed does not need this list.

• Enter each address that your pages use, as for the embeds.
• For development, you can add an address such as http://localhost:3000.

A save of this list needs the Cloudflare Account API Token, because it changes a rule of your bucket. A Mac with no such token shows the list but cannot change it.

When you add a site, Kitset also clears the Cloudflare cache of your video files. Cloudflare keeps a separate copy of a file for each site that loads it, and a copy from before the change can block the new site. After this, the next viewer of each video can wait a little longer.

The addresses of the files

Each complete video has files at fixed addresses on your media hostname. Copy Media URL in the Library gives the address of the folder, and the edit window shows it as Media. To get the address of a file, add the name of the file to the address of the folder.

File ▸ Export CSV… gives these addresses for every video. See Export a list of the videos.

Safari plays the HLS playlist in a <video> element with no library:

<video controls playsinline
       poster="https://media.example.com/media/summer-launch/poster.jpg"
       src="https://media.example.com/media/summer-launch/master.m3u8"></video>

Other browsers need a player library, for example Shaka Player, hls.js or dash.js. The player pages of Kitset use Shaka Player.

What stays fixed

• The playlist addresses do not change when you replace the video or change its subtitles.
• poster.jpg is always the current poster. A browser can keep an old poster for up to 5 minutes after a change.
• A change from public to unlisted moves the video to a new folder, so its addresses change. See Change the visibility.

What a player can read

The media hostname serves the video files, the playlists, the posters and the subtitles to anyone. A firewall rule blocks the private files of your site, such as the details of each video. The list of other players does not give access to more files. It only controls which sites can read the files with a script in a browser.