All Collections
Design and Layout
Layout & Styling
Adding videos as backgrounds or addons
Adding videos as backgrounds or addons

How to insert a video into your campaign

Nicolaj Støy Laursen avatar
Written by Nicolaj Støy Laursen
Updated over a week ago

You can add a video to your campaign in several ways. The most common are to add the video as a background or to use the video addon.

Playable does not offer video hosting, so you cannot upload video files to your media library. Instead, you need to host your video elsewhere and embed it on your campaign.

Video Background

To add a video as a background, select the element in the navigator (usually the game flow section) and edit the background under the Style tab.

You can add a link to a YouTube or Vimeo video, but this will only work on desktop because mobile browsers do not allow videos to autoplay.

For this reason, we recommend you use a link to an externally hosted mp4 file.

This could be something you have in your own CMS system, but you can also get a link to the mp4 file if you have a Vimeo Pro account.

Background video settings

By default, the video will loop continuously. You can disable this if you only want the video to play once.

Note that background videos cannot have sound, as this will block the autoplay functionality. You don't have to do anything — sound will automatically be disabled by Playable on your background videos.

Fallback image

We suggest you upload a fallback image in case your video fails to play.

Transparency or overlay

Consider adding a colored overlay or making the video semi-transparent to make the text of your campaign easier to read. You can also add an overlay to a column instead of the entire section or page.

Video Addon

You can add the video addon to a section or flow page.

Because the video addon includes player controls, you can use the YouTube or Vimeo link, also on mobile. You can also use an external mp4 if you want.

Using YouTube or Vimeo

Copy the URL straight from the browser. Don’t use the share link or the embed code.

Using an external mp4

For the video to display, the URL needs to start with https:// and should include the mp4 file.

In most cases, that means the URL should look like this: https://cdn.zappy.app/28de64c8373470567d3d74a3954fb912.mp4

not like this:

Video addon settings

You can enable sound automatically or you can enable autoplay. You cannot have both settings turned on at the same time. This is because browsers will block autoplay on videos with sound.

We recommend you enable sound by default but not autoplay. This lets the user click to start the video.

If your video doesn't already have controls (play, pause, full screen, volume), you can add these under the addon's settings. Most videos from YouTube and Vimeo will already have controls.

Also in your YouTube and Vimeo settings you can control what happens when the video ends (loop, blank screen, other recommended videos), but if you are using an mp4 file, you can enable looping in the video addon. Otherwise when the video ends, there will be a blank screen.

Video size

The video addon by default displays the video as 400px wide and 250px tall. You can adjust these settings to increase the video's display size or fit its aspect ratio.

Did this answer your question?