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.
The focus of this article is to detail the process for publishing a plugin using the iFrame embed method...
Step 1- Log into 3Play Media
Step 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.
Step 3- Navigate to Plugin Template
Click the Publish button and from the drop-down menu that appears select Publish Plugin.
Step 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.
Step 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).
NOTE: If the video was uploaded via an integration, certain drop-downs will be auto-populated, including, but not limited to; Video source, Video player type, and Video ID. You will be unable to edit the Video player type drop-down.
Step 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.
Step 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.
Step 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.
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.
Driving off of the Video ID instead of the 3Play Media ID
PRO TIP: When the iFrame embed code contains a video ID from the hosting platform, the video ID can be referenced instead of the 3Play Media file ID. 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>