Viddler: Embed an Audio Description Plugin with a Viddler Video on Your Web Page

Once your media file has been transcribed by 3Play Media you can embed an audio description plugin along with your Viddler video on your webpage. To get started, follow the steps below...

Content Publishing must first be enabled in your 3Play Media account.
See more information on enabling content publishing in your 3Play account.


Step 1- Open your HTML editor 

Open the application you use to build and edit your webpages.

Step 2- Add the Viddler video embed code 

Your Viddler embed code should look similar to the example below once added to a new or existing page. Make sure to include a player ID, in bold below. This can be any string of letters - in this example, we've used viddler_player_handle. You will need to enter the same ID when creating your Audio Description Plugin Template in Step 4.

Note that the links below will be unique to your embed code.

<div id="my-player"></div>
<script type="text/javascript" src="//"></script>
<script type="text/javascript">
    var viddler_player_handler = new ViddlerEmbed({
        videoId: '5f8b3844',
        width: '600px',
        target: '#my-player'
    }); </script>

Step 3- Log into your 3Play Media Account


Step 4- Create New Plugin Template

Navigate to Settings > Plugin Templates and click +Create Plugin TemplateSee more information on how to create a Plugin Template.


> For Player select Viddler from the drop down menu. 
> For Plugin Type choose Audio Description. 
> For Player ID, use the player ID you created in step 2.

Interactive Transcript Plugin Template Creation 

Under Plugin Settings you will notice options for a volume equalizer. Selecting this feature allows the audio to automatically lower the source volume while the description plays, and increase the volume when it is done.

When you publish with the Audio Description Plugin, you will see an equalizer icon next to the AD icon. If you decide you want to adjust the volume manually, you can turn this automatic feature on or off by clicking the equalizer icon on your plugin. 

Step 5- Select your 3Play Media file

Go to the My Files page in your 3Play Media account.
Click on the file associated with the content you want to embed on a webpage using Viddler.

Select your 3Play Media file


Step 6- Click Publish Plugin

Click the Publish Plugin button located above your list of files.

Click Publish Plugin button

Step 7- Select a Plugin Template

Select Your Plugin and select the plugin template created in step 4 from the dropdown.

Select Interactive Transcript Plugin Template 

Click the box next to Include SEO Embed, if you would like this to improve SEO.

Step 8- Copy the 3Play Media plugin embed code

Once highlighted blue, copy this code. 
This is your 3Play Media audio description plugin embed code. 

Copy interactive transcript embed code


Step 9- Paste the audio description embed code into your HTML

Go back to your HTML code.
Paste the 3Play plugin embed code below the video embed code in the <body> of your HTML.

Below is an example of what the audio description plugin embed code should look like.   

<script type="text/javascript" src="//"></script>
Your HTML will similar to the example below when complete.

<div id="my-player"></div>
<script type="text/javascript" src="//"></script>
<script type="text/javascript">
    var viddler_player_handler = new ViddlerEmbed({
        videoId: '5f8b3844',
        width: '600px',
        target: '#my-player'
    }); </script>
<script type="text/javascript" src="//"></script>


Step 10- Publish your Viddler video with the audio description plugin

Save your new HTML code and publish your audio description plugin along with your Viddler video!  Enjoy!

Have more questions? Submit a request


Please sign in to leave a comment.
Powered by Zendesk