Kitset

Contents

Custom templates

A custom template is one HTML file. It gives the player pages your own layout, styles and scripts. The page Worker puts the video and its details into placeholders in the file.

For a new font or a change of colours, you do not need a template. Use the fonts and stylesheets of the Design tab.

Make a template

  1. Open Site Settings ▸ Design.
  2. Choose Export ▸ Automatic Template…, Light Template… or Dark Template…, and save the file. A built-in template is the best start. Its first comment explains the placeholders.
  3. Edit the file.
  4. Click Import…, and choose the file. Kitset checks the placeholders. The Template menu changes to Custom.
  5. Click Save.

To change the template later, edit your file and import it again. Export ▸ Custom Template… gives you a copy of the template of the site.

A template is at most 256 KB of UTF-8 text.

Placeholders

A placeholder is a name in double braces, with no spaces, for example {{title}}. A template must have {{head}} and {{player}}. The others are optional.

Placeholder What it holds Where it goes
{{head}} The styles and scripts of the player, the fonts, the colours of the player and the link preview tags. In <head>, before your own <style> element.
{{player}} The video element and the player. In <body>, where the video goes.
{{title}} The title of the video, as text. In <title>, in a heading, or in an attribute value in double quotes. It can be in several places.
{{description}} The description, as a <div> with a paragraph for each paragraph. It is empty when the video has no description. In <body>, where a <div> can go.
{{site}} A link to the home page, with the title of the site. It is empty when the home page is not public and the person did not sign in. In <body>, where a link can go.
{{visibility}} The Unlisted icon of an unlisted video. It is empty for a public video. In <body>, for example in the heading after the title.
  • {{ title }} and {{Title}} are not placeholders. Kitset warns about text that looks like a placeholder but is not one. Such text stays in the pages as it is.
  • Do not put {{title}} in a <script> or <style> element.
  • Do not put {{description}} in a <p> element or in a heading, because it contains paragraphs.

Names for your styles

{{head}} defines these names.

Name What it is
.kitset-player The box of the player. It has the shape of the video.
.kitset-description The box of the description.
.kitset-site The link to the home page.
.kitset-visibility The Unlisted icon. Its font-size sets the size of the icon, and its color sets the colour.
.kitset-message The message box on the page for a missing video. It has the size of a player.
--kitset-video-width, --kitset-video-height The size of the video, as numbers with no unit. For example, calc(80vh * var(--kitset-video-width) / var(--kitset-video-height)) is the width of a video that is 80% of the height of the window.
--kitset-font-family The text font of the site, then the Inter font.
--kitset-heading-font-family The heading font of the site, then the text fonts.
--shaka-font-family The font of the player controls. Set it on :root to give the controls a different font.
--kitset-tooltip-font-family The font of the tooltips of the controls.
"Inter Variable" The Inter font, which every site has.

What a template can load

A custom template can load scripts, styles, fonts and images from other sites, and it can connect to other sites, for example for analytics. Inline scripts, frames and forms also work.

The built-in templates are stricter. They load scripts, styles and fonts only from your page hostname, and images and video only from your page hostname and your media hostname. So an edit of a built-in template that loads a file from another site works only after you import it as a custom template.

A template cannot use a <base> element, because it would stop the player.

Pages that use the template

The pages of the videos and the “Video not found” page use the template. On the “Video not found” page, {{title}} is “Video not found” and {{player}} is a message box.

The home page and the sign-in pages always use the built-in layout, with the colours of Automatic.

Upgrades

A custom template does not change when Kitset updates the page Worker. To get an improvement of the built-in templates, export a built-in template again and compare it with your file.