Ë
Kasper-Niclas Andersen By Kasper-Niclas Andersen • October 6, 2017

Generate A Responsive Video Uploader Widget In 3 Simple Steps

We recently made some major improvements to our video uploader widget. SYNQ Uploader is our lightweight, ready to go, embeddable video uploader that you can use on your websites or in your apps to easily add reliable video uploading functionality! Maybe you want to offer your visitors a simple way to upload their videos, or perhaps you just need a good way to upload videos to your service for you and your team. SYNQ Uploader will suit either use case.

Usage

You need an API key to complete this guide,  if you don't have one already, get one here

1. Create a video object

For this guide, I will make all calls in the browser using our API docs. First, we need to create a new video object, which will give us a video_id. Paste your API key into the api_key field and click Send request:

Generate a video file uploader, step 1

You should get something like this in return:

 Copy your video_id string, as we will use that in our next step to get the uploader.

 

2. Call the uploader endpoint

After all that hard work, you're finally ready to generate the uploader! Paste your video_id into the video_id field and click Send request.

Generate a video file uploader, step 2

A json object with your uploader URL will be returned:

 

3. Embed the uploader in an iframe

Simply place the uploader URL in an iframe tag - and voilà! You've got yourself an embeddable video uploader:

 

Customization

 

How SYNQ Uploader can look in actionSYNQ Uploader in action

Don't like the standard look of the uploader? No need to worry, you can customize the appearance of the uploader using query string parameters. This is particurlarly useful if you need it to match your brand:

Parameter Function Type Default
button Display the uploader in a compact mode that looks like a button boolean false
fontsize Change the base font size for the uploader's text number 20
skin.background Set the color of the uploader widget’s background. Hex Color 4E565E
skin.text Set the color of the uploader widget’s text. Hex Color FFFFFF
skin.progress Set the color of the uploader widget’s progress-bar. Hex Color 43BFA7
skin.success Set the color of the uploader widget’s success icon. Hex Color 43BFA7
skin.error Set the color of the uploader widget’s error icon. Hex Color D44747

 

Any colour you like

This example shows how the uploader looks with the default values:

(This example is for demonstration only and will not actually allow you to upload files)

Easily change the looks of the uploader:

SYNQ Uploader customization examples

You can also use the button parameter to make the uploader look more compact, like a button:

SYNQ Uploader button mode example

 

 

Uploader events

Add some automation to your video uploading workflow with postMessages. When you have embedded an uploader iframe, SYNQ Uploader will send postMessages to your page whenever the status of the uploader changes. The following code is an example of a script that redirects the user to the frontpage when an upload is successfully completed:

You can do many more things with postMessages. Please refer to our uploader docs for a full list of statuses you can get returned from oldStatus and newStatus.

 

SYNQ Uploader Features

  • Responsive
  • Progress bar
  • Button mode
  • Drag and drop
  • Fully embeddable
  • File chunking (fast uploads)
  • Pause, resume or retry uploads
  • Customizable: change colours, text and more
  • Supports all common formats (mp4, webm, mov++)

 

 


 Start your 14-day free trial today to take advantage of the SYNQ Video API.

START YOUR FREE TRIAL


 

Related posts: