3Play Plugin: iFrame Embed Method

The 3Play Plugin helps makes videos interactive, engaging, and more accessible. With the 3Play Plugin, you can add an interactive transcript, closed captions, and/or audio description to your videos. Features can also be included to boost SEO. The 3Play Plugin is compatible with most major video players and is compatible with most publishing environments, including LMSs.

While two embed methods are offered for publishing plugins; iFrame and JavaScript, 3Play Media highly encourages users to implement plugins using the iFrame embed method.

Prerequisites

• The 3Play Plugin is not available to Express accounts
• Content Publishing must be enabled for access to the 3Play Plugin

Steps to Create a 3Play Plugin With the iFrame Embed Plugin Code

 1. Log into 3Play Media

 2.Select a 3Play Media File

From the My Files page, click on the file that you would like to publish as a 3Play Plugin.
Once you click into a file you will be directed to the file-show page.

 3.Navigate to Plugin Template

Click the Publish button and from the drop-down menu that appears select Publish Plugin.

 4.Plugin Template

By default, [No Template] will display within the Plugin Template field. Keep the Plugin Template set to [No Template] for now.

• The Plugin Template drop-down menu contains Public Templates created by 3Play Media which can be loaded and used as-is or can be used as a starting point to jump off of to further customize the plugin. Any other templates that were created by 3Play users within your account will display as an option within the drop-down menu which can be selected.

• See more information regarding Creating and Managing Templates
• See more information on converting old plugin templates

 5. Select Video Settings 

If you did select one of the [PUBLIC] templates, select your preferred Video Settings. 

• For the Video source drop-down select Custom if you would like to enter in your video credentials manually.
• For the Embed Method drop-down,  Simple (iframe) will be selected by default. Keep the embed method set to Simple (iFrame).
• For the Video player type drop-down, select which player type the video will be played on. (Brightcove, YouTube, Ooyala etc.)

Depending on the Video player type selected, you will be prompted to enter in additional required items such as Player ID, Video ID, or Account Number. (there could be greater or fewer drop-downs depending on the Video player type).

• Click here to locate the required IDs from the hosting platform when iFrame Publishing

 6.Select Style Settings

Set the width and height for the plugin in px.

• The default is 500px by 500px. Select Light or Dark for Plugin skin.

 7.Select Plugin Features

Select the Plugin features you'd like to include in the plugin. Options that can be selected are Interactive Transcript, Audio Description, Closed Cations, and SEO Embed.

See more information about these different plugin features here

 8.Publish and Share

Under embed code, click the Copy to copy the iframe embed code to your clipboard. Paste the plugin embed code below the video embed code within the HTML.

Shareable Link

If you would like to send someone a link to your plugin, click the Copy button under the Hosted link section to paste and share.

To do this remove the mf=12345& from the iFrame embed code so the code should go from looking like this:

• <iframe marginwidth=‘0px’ marginheight=‘0px’ width=‘500px’ height=‘500px’ frameBorder=‘0’ src=‘//plugin.3playmedia.com/show?embed=iframe&height=500px&itx=1&itx_collapse_on_load=0&itx_collapsible=1&itx_downloadable=0&itx_highlight_by_caption_frames=0&itx_keywords=0&itx_light_scroll=0&itx_multi_text_track=0&itx_progress_bar=0&itx_progressive_tracking=0&mf=12345&p3sdk_version=1.10.4&p=26985&player_type=wistia&plugin_skin=light&video_id=a1b2c3d4e5b&video_target=tpm-plugin-x4u1gtkb-l73tht4nvd&width=500px’></iframe>

to looking this:

• <iframe marginwidth=‘0px’ marginheight=‘0px’ width=‘500px’ height=‘500px’ frameBorder=‘0’ src=‘//plugin.3playmedia.com/show?embed=iframe&height=500px&itx=1&itx_collapse_on_load=0&itx_collapsible=1&itx_downloadable=0&itx_highlight_by_caption_frames=0&itx_keywords=0&itx_light_scroll=0&itx_multi_text_track=0&itx_progress_bar=0&itx_progressive_tracking=0&p3sdk_version=1.10.4&p=26985&player_type=wistia&plugin_skin=light&video_id=a1b2c3d4e5b&video_target=tpm-plugin-x4u1gtkb-l73tht4nvd&width=500px’></iframe>

See more information on how to customize your plugin template here

See more information on how to utilize custom JavaScript/AJAX here