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 desktops 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.
See how to get the link in this guide: https://vimeo.zendesk.com/hc/en-us/articles/224823567-Direct-links-to-video-files.
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 add-on includes player controls, you can use the YouTube or Vimeo link 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.
A YouTube URL should look like this: https://www.youtube.com/watch?v=-q0YK3AqBEQ, not like this: https://youtu.be/-q0YK3AqBEQ
A Vimeo URL should look like this: https://vimeo.com/347502937
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.