Table of contents

Apart from those fully supported video websites like Netflix, Youtube, with GlotDojo extension, you can integrate the lookup feature on any video web that you want.

Requirement: the video you want to integrate must have close captions [CC] which means you can turn on or off the captions.

When integrated successfully, the lookup can be used by pressing one of the 2 keys: [<,] và [>.] on your keyboard. To translate a subline, press and hold Alt + J

Step 1: Get the element class of the video web from Developer Tools

Open the video web, eg: https://vimeo.com/144716677

Turn on the closed captions [CC]

Open Developer Tools

Right click on the website, choose Inspect. Or you can press and hold Ctrl+Shift+I  for Windows (or Cmd+Opt+I for Mac) to open DevTools.

Under the Element tab of  Developer Tools, press Ctrl + F (Windows) or Control + F (Mac) to search on the Element tabs. (1)

On the search bar, enter a random subtitle sentence you get from the subtitles (2). The below example is:  “but a whole climbing adventure”.

Look for the ” class ” tag (3), the one closest to the subtitle found in Element tab. You’ll then see the content for element class. In this case, it is: vp-captions , the one inside the ” ” (the quote). Double click and press Ctrl + C to copy it.

Step 2: Integrate

Open the Option page of GlotDojo: Right click on the GotDojo icon from the menu bar. On the drop down menu, click on Options as seen in the image below.

On the Options page, please follow these steps:

>> Choose Integrate Video Sites

>> Choose “Add new”

>> Fill in the URL of the video web. Eg: Vimeo.com

>> Fill in the element class got from Step 1. Eg: vp-captions

>> Click "Submit”

Step 3: Look up subtitle on the newly integrated video web

Go back to the video web, press F5 or refresh the web to update your integration status. Now, you can press one of these 2 keys to look up new words on the the subtitles: [<,] & [>.]. You can also press and hold  Alt + J to translate the whole subtitle line.

In addition, GlotDojo also provides the element class for some pages such as:

masterclass.com
osmosis.org
lynda.com
vimeo.com

You need to select the page you want to integrate from the list of available sites and choose Submit.

You couldn’t integrate GlotDojo successfully?

There are 3 reasons that you couldn’t integrate GlotDojo to the video web:

  1. You got the incorrect  Element class
  2. You couldn’t find the element class
  3. Other cases that we haven’t experienced before

Incorrect Element class

Please be informed that the Element class DOES NOT CONTAIN SPACE . If you see an element class like the ones below:

  • class = “captionsText ng-xyz” , or
  • class = “meta-script 9”

Please remove all characters after the space. In these cases, the element class would be “captionsText” or “meta-script”.

Element class not found

Please take a screenshot of the Developer tool view that you couldn’t find the Element class. Then send the following info to GlotDojo via glot@ejoylearning.com

  • link to video web that you want to integrate GlotDojo to
  • screenshot of developer tool view where you couldn’t find the element class

We will send you back with instructions for your special cases. And thanks to your feedback, we can update this guideline with more specific cases.

I hope that this article can help you integrate GlotDojo successfully to your desired video webs and then this helps you learn English with joy and ease. Over time, we will update our list of video webs with full support thanks to your feedback. Happy learning to you!