YouTube: Embed an Interactive Transcript with a YouTube Player on Your Webpage

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

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.

Follow the steps below to get started.

Please note that this article details how to embed an interactive transcript working with YouTube's iFrame 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

transcription closed captioning translation account 3Play Media login

Step 7- Create a Plugin Template

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

 

> For Plugin Template choose either Interactive Transcript Light or Interactive Transcript Dark.
> For Player Type select YouTube from the drop down menu.
> For Player ID field enter myytplayer.
> For a fixed pixel Height and pixel Width either a value followed by px. For example, 300px 
For a responsive plugin embed code enter a value followed by %. For example, 100%
> For Settings choose from the available options.

After designing the plugin template click Save My Plugin.

PRO TIP: If you want the video player and the interactive transcript plugin to match in width, change the plugin template's width to match the width of the YouTube player! If you change the width of the YouTube player to match the interactive transcript plugin, the aspect ratio of your video will likely be distorted 

 NOTE:  If the template needs to be modified, it may take up to a day before the changes take place.

Step 8- Select file

From the My Files page in your 3Play Media project click on the name of the file associated with your YouTube video.

Select transcript that correlates to Brigthcove video

Step 9- Click Publish Plugin

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

Click Publish Plugin

Step 10- Select a Plugin Template

Click Select Your Plugin and from the drop down menu that appears select the plugin template created in step 8.

Click the box next to Include transcript in noscript tag for SEO, if you would like this to improve SEO.

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.

interactive transcript embed code for Kaltura

Step 12- Paste the plugin embed code

Go back to your HTML code. 
The code for the YouTube video and the interactive transcript 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 the HTML page 

Save the HTML document and publish it!  Enjoy!

 

 

Have more questions? Submit a request

1 Comments

Please sign in to leave a comment.
Powered by Zendesk