Basics Overview Videos Rates & Services Managing your Sites Editing & Publishing Collaborating Account Settings Moving from Cargo 2 to 3
Site Building Site and Page Layout Pages and Sets Text Styles Adding Fonts Pinning Overlays Linking Tags Images Files Columns Galleries Thumbnail Index Marquee Clock Effects Page Options Commerce Audio & Video Backdrops Layering Effects Scroll Animation Quick View Mobile Site Menu Third-party embeds CSS and HTML Social Sharing & SEO Adding Google Analytics Browser Support Domains Buying a domain from Cargo Domains purchased elsewhere Using Subdomains DNS Editing Domain Configuration Service Setup Email with a Domain

Audio & Video

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 to your site, drag an MP4-formatted video into your page from your desktop, the File Library, or the page’s Images menu.

Shorter videos without an audio track will be muted, set to autoplay, and loop, much like an animated GIF. Longer videos will use the browser’s default video interface and play unmuted and without looping. These settings aren’t permanent—you can change them by right-clicking the video after adding it to the page.

Enabling “Default Controls” displays the browser’s embedded player interface, including a visible timeline. Disabling it makes the player interface as minimal as possible.

If you choose a poster image, it will be displayed instead of the video before playback begins. If a video is set to autoplay, it will also be muted automatically, since browsers do not allow videos with audio to autoplay.

You can also embed Vimeo and YouTube videos by pasting their URL or embed code directly into the page. These will display their standard branded player interface when “Default Controls” is enabled in their settings.