Formatting for the Web

There are many video and audio formats that aspire to be web-compatible formats, but only H264-formatted MP4 video files and MP3 audio files are universally supported by contemporary web browsers.

Browser-compatible MP3 files can be generated by any number of different programs, like Audacity or Music.app.

Video can be more complex. Even if a video has the correct MP4 file extension it may still not be using the correct video codec. If your video works in one browser but doesn’t play in others, it is likely not using the H264 codec. Additionally, many applications that generate correctly-formatted video files will make them overly large, causing slow loading and performance issues in your site. We recommend Handbrake for generating size-efficient and web-compatible videos. When in doubt, Handbrake’s default preset works well.

Autoplaying with audio is not supported by browsers: video can autoplay as long as it is muted.

Audio

To add audio into your site, drag an MP3 file into your page from your desktop or from a pre-existing file from within your File Library. This will place a configurable audio player into your page.

Look for audio-player inside your CSS to configure the fonts and styling of the player interface. You can use a number of CSS variables to control other aspects of the audio player.

For example, you can insert text into the play/pause button by changing text inside the --play-text and --pause-text variables. Increase the width of the button to accommodate that change:

audio-player::part(button) {
    --icon-color: rgba(0, 0, 0, 0.85);
    --icon-size: 32%;
    --play-text: 'Play';
    --pause-text: 'Pause';
    width: 6em;
    display: inline-flex;
    justify-content: center;
    cursor: pointer;
}

Hide the default play and pause icons with a display property:

audio-player::part(play-icon) {
    display:none;
}

audio-player::part(pause-icon) {
    display:none;
}

Or, if you want to keep the icon visible next to the text, add padding to the right side of the icon to add some distance between the two:

audio-player::part(play-icon) {
    padding-right: 1em;
    padding-left: 0.6em;
}

audio-player::part(pause-icon) {
    padding-right: 1em;
    padding-left: 0.6em;
}

Video

To add a video into your site, drag an MP4-formatted video into your page from your desktop, from the File Library, or from the page’s Images menu. Shorter videos with no audio track will be muted, set to autoplay, and loop, much as if they were an animated GIF. Longer videos will be configured to use the browser's default video interface and play back unmuted and unlooped. These configurations are not permanent; change them by right-clicking the video after it has been added to the page.

There are two main video interfaces to choose from: A transparent interface that consists of a clickable poster frame image, and the browser default with a visible timeline. If you choose a poster image, it will display when the video is not playing.

Embed from Vimeo and YouTube

Add Vimeo and YouTube embeds by pasting their URLs or embed codes directly into the page. These will display with their default branded interface if you choose the “browser default” option in their settings.