YouTube: Embed the Captions Plugin with a YouTube Player on Your Webpage

Should you not be able to manually upload an SRT caption file to a YouTube video because it is not owned by you, embedding the video along with the captions plugin on a webpage is a great workaround giving viewers the ability to watch the content along with closed captions.

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

Follow the steps below to get started.

Alternatively, we offer a stripped-down version of this article that highlights the key steps and modifications for creating an interactive plugin with a YouTube player.

 

Please note that this article details how to embed the captions plugin with a YouTube iFrame video embed code on a webpage. 

*Scroll down to the bottom of the page to copy the code necessary when working with YouTube's Old Embed code.

 

Step 1- Copy the code 

Copy the entire code displayed below:

<script type="text/javascript" src="http://www.youtube.com/iframe_api"></script
<iframe id="myytplayer" type="text/html" width="440" height="300" src="http://www.youtube.com/embed/{YOUTUBE_ID}?enablejsapi=1
frameborder="0"></iframe>

 

Step 2- Paste code into HTML document

Paste the code into the text editor used to build your webpages.
This code should be pasted inside the <body> tags of your HTML document.

<html>

<head>
</head>

<body>

<script type="text/javascript" src="http://www.youtube.com/iframe_api"></script
<iframe id="myytplayer" type="text/html" width="440" height="300" 
src="http://www.youtube.com/embed/{YOUTUBE_ID}?enablejsapi=1
frameborder="0"></iframe>

</body>

</html>

 

Step 3- Navigate to the YouTube video

YouTube logo

Go to YouTube and navigate to the video you wish to embed on your webpage.  

 

Step 4- Copy the YouTube Video ID

Copy the unique YouTube video ID located after the ?v= in the URL.

YouTube video ID

 

Here is the YouTube link from the image above, the Video ID is in bold: 
http://www.youtube.com/watch?v=mTOYClXhJD0

 

Step 5- Paste the video ID into the HTML

Go back to the HTML page from step 2 .  
Locate {YOUTUBE_ID} in the code.
Delete {YOUTUBE_ID} and replace it with the unique Video ID associated with your YouTube video.  
Be sure the video ID is place between the /embed/ and ?enablejsapi=1" 
It should now look similar to the example below except that the video ID will be unique to your YouTube video.

 

<html>

<head>
</head>

<body>

<script type="text/javascript" src="http://www.youtube.com/iframe_api"></script
<iframe id="myytplayer" type="text/html" width="440" height="300" 
src="http://www.youtube.com/embed/mTOYClXhJD0?enablejsapi=1
frameborder="0"></iframe>

</body>

</html>

 

Keep this HTML document open.

  

Step 6- Log into your 3Play Media account

 

 

Step 7- Create a Plugin Template

Navigate to Settings > Plugin Templates.

Click on Captions Plugin.
See more information on how to create a Plugin Template 

> For Player select YouTube from the drop down menu.
> For Player ID field enter myytplayer

Select Skin, set dimensions (Height and Width) and select from the available plugin Settings.

 

Step 8- Select your 3Play Media file

Go to the My Files page in your 3Play Media account.
Click on the file associated with your YouTube video.

 

Step 9- Click Publish Plugin

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

 

Step 10- Select a Plugin Template

Select YouTube

 

Step 11- Copy the Plugin embed code

After selecting a plugin template copy the plugin embed code that appears within the Publish Plugin pop-up menu.

 

Step 12- Paste the plugin embed code

Go back to your HTML code. 
The code for the YouTube video and the caption plugin will look similar to the example below:

<html>

<head>
</head>

<body>

<script type="text/javascript" src="http://www.youtube.com/iframe_api"></script
<iframe id="myytplayer" type="text/html" width="440" height="300" 
src="http://www.youtube.com/embed/mTOYClXhJD0?enablejsapi=1
frameborder="0"></iframe>

<script type="text/javascript" src="//static.3playmedia.com/p/projects/0000/files/0000/plugins/00000.js"></script>

</body>
</html>

 

Step 13- Publish your YouTube player with the captions plugin

Save your new HTML code and publish it!  Enjoy!

 

 

 

*
The code you should copy if working with the old YouTube embed code:

<script type="text/javascript" src="http://p3.3playmedia.com/javascripts/vendor/swfobject.js"></script>
<div id="youtube_container"></div> <script type="text/javascript"> var url = new SWFObject('http://www.youtube.com/v/{YOUTUBE_VIDEO_ID}&rel=0&ap=%2526fmt%3D18...','myytplayer','1280px','720px','9','#FFFFFF'); so.addParam('autostart','true'); so.addParam('allowfullscreen','true'); so.addParam('allowScriptAccess','always'); so.addParam('wmode','transparent'); so.write("youtube_container"); </script>

 

If you are using the old YouTube embed code (non-iFrame), your code should look similar to this when complete:

<html>
<head>
</head>
<body>
<script type="text/javascript" src="http://p3.3playmedia.com/javascripts/vendor/swfobject.js"></script>
<div id="youtube_container"></div> <script type="text/javascript"> var url = new SWFObject('http://www.youtube.com/v/mTOYClXhJD0&rel=0&ap=%2526fmt%3D18...','myytplayer','1280px','720px','9','#FFFFFF'); so.addParam('autostart','true'); so.addParam('allowfullscreen','true'); so.addParam('allowScriptAccess','always'); so.addParam('wmode','transparent'); so.write("youtube_container"); </script>
<script src="http://static.3playmedia.com/p/projects/010101/files/0101101/embed.js?plugin=captions&settings=width:398,skin:dark,overlay:true,searchbar:true&player_type=youtube&player_id=myytplayer" type="text/javascript"></script>
</body>
</html>
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk