Web embed
Vouch offers the ability to add a dynamic media player to your website or application to showcase your collected Vouch videos.
The following guide shows outlines the steps involved to generate a web embed.
Creating your Web embed
To create your web embed, simply navigate the respective video you wish to embed on a webpage or an app and click on it. This will load the video details page. From here, click on the share video button in the top right hand corner and click on web embed.
This will load the Web embed configuration page where you can configure it's design and behaviour.
Configuring your Embed
Template
Choose the pre-defined styling you wish to apply to the video. To find out more about Templates and how to create your own, click here.
Aspect Ratio
| Dynamic | Embed will take on the aspect ratio of the parent container. Ignores all orientation settings. |
| Orientation | Available Orientations:Portrait (9:16)Landscape (16:9)Square (1:1) |
Size
When disabled, the Embed will have a capped maximum size. When enabled, this will allow the embed to stretch to the full size of the parent container
Visual Settings
Controls
| Control | Description |
| Play Icon | Display the large play icon on the player |
| Navigation | Allow users to navigate between video clips |
| Play | Allow for the video to be played and paused |
| Volume | Allow for the volume of the video to be controlled |
| Current Time | Show where in the video the user is currently up to |
| Duration | Show the total duration of the video |
| Playback Speed | Allow users to adjust the playback speed of the video |
| Captions | Allow users to turn on/off captions |
| Full screen | Allow users to play the video in full screen |
| Progress Scrubber | Allow users to see the video scrubber |
| Languages | Allow users to enable multi-lingual |
| Video Preview | Allow users to preview the video on the scrubber |
Playback Settings
| Setting | Description |
| Autoplay | Start playing the video immediately on page load |
| Pre-load | Load the first video when the page loads |
Embedding on your Website
Once you have finished configuring the Embed, the only remaining step in the process is to generate embed code so you can add it to your website.
Vouch offers two ways to embed your Vouch Embed. These are:
- iFrame / oEmbed
- Javascript Embed
The Javascript Embed is the recommended approach for clients as it will natively render your play on the page which you have added it. The iFrame / oEmbed is designed for implementations within other applications or on websites that do not support Javascript.
The iFrame / oEmbed link can also be used on any service which support oEmbed.