Video Transcript Toggle

Code Snippet Library


This style works by putting the video iframe inside a div tag . It creates an accessible show/hide link for a video transcript that when expanded is the full page width for readability. Ideally this style should be used for short video transcripts that are unlikely to be printed. For longer transcripts, we recommend linking a document. See the Video Playlist with Document Transcripts page.

Adobe Acrobat OCR Training Transcript

JACOD IWINSKI, PENN STATE STUDENT: Welcome to the tutorial for how to use Adobe Acrobat professional to OCR or automatically recognize characters within your PDF documents. First, make sure you have Adobe Acrobat professional installed as it will not work with Adobe Reader DC. If you do not have Adobe Acrobat professional installed, go to Adobe.psu.edu for more information or contact your local IT department.

Now that we've gone over the software necessary, let's go over what exactly OCR is and what it can do for you. This is an example of a PDF that was created from a scan of a book. So, the book is merely a photo that has been turned into PDF form; as such, it shouldn't actually have characters or selectable text in it, but because of Adobe's character recognition software, you can see that we can select and highlight text—even comment or annotate just like it was a Word document that was converted to a PDF. In fact, we can even use the Search function to find specific words in the PDF. This is especially useful if we have a long PDF that we need to find specific words or phrases in.

Now that we've gone over what OCR can do for us, it's important that we go over how to actually OCR a document. So, make sure again you have Adobe Acrobat Professional installed as Adobe Reader will not work, and have the necessary PDFs that you want to annotate [scan] in your computer. Then go to (once you have Adobe Acrobat professional open):

  1. Go to the Tools Tab. From here you can:
  2. Click Enhance Scans on either the left-hand side or on this right-hand side pull-down tab. These are also available if you click into Adobe Acrobat Professional normally when you open a PDF. Once you've clicked Enhance Scans, you then:
  3. Go to Select a File and find the appropriate file you want to enhance on your computer. This process is the same on Windows as well as Mac as Adobe Acrobat Professional does not change. Once you've brought up the Enhanced Scans submenu by opening up the PDF in the Enhanced Scans menu, you will be prompted with this submenu below the normal toolbar.
  4. Click Recognize Text in this file or in multiple files. If you use multiple files, this is what Adobe allows us to do batches, so if you wanted to do all of the PDFs or readings for an entire class, you would use the Multiple Files  tab and select a folder that had all of your PDFs for that class in it, and you can do them all in one massive batch.
  5. But in this instance, we're going to click in this file. This will bring up a second submenu where you can change settings, like the amount of pages you want to OCR, or the language if it's in another language. But in this instance, we're only going to click Recognize Text.
  6. After you've clicked the Recognize Text button, Adobe Acrobat Professional will scan every page in that PDF and give it the appropriate annotations so that you can now select Highlight, annotate, or even use the Find function.

Again, this PDF was created from a book, so this would not be possible without the OCR function in Adobe Acrobat. Everything is done now, and all you have to do is click Save or click Save whenever you exit out of the program. Now if we went back and open up this PDF you can see we can still select and highlight text, whereas this PDF which we have not OCR'd does not have that ability and is, therefore, less useful for us as a method of learning.

This concludes the Adobe Acrobat OCR PDF training.

 

Show/Hide Video Transcript Code
<div><iframe src="VideoLink" width="640" height="360"></iframe>
    <details>
      <summary>Title of Video Transcript</summary>
        <div style="margin: 1rem; padding: 0.5rem 1rem; border: 2px solid #cccccc; background: #eeeeee; overflow: auto;">
          <p>Transcript Text</p>
        </div>
    </details>
</div>

 

Best Practices

Indicating Video Length

Some video platforms like YouTube do not display the length of the video by default unless you press play. You may want to list the length of the video, as shown in the example on this page, so people know how long it is without having to interact with the player.

Checking for Accurate Captions

Several video platforms, including YouTube and Kaltura, offer machine-generated captioning services. While these may be helpful in some cases, especially with short videos that have clear audio, they will rarely if ever be 100% accurate. Fortunately, it is easy to identify whether or not a video's captions have been machine-generated. For YouTube videos, expand the settings icon and look at the name of the Subtitles/CC track to see if the captions say "auto-generated." If you are the owner of the video, you can add or edit captions in YouTube Links to an external site.. If you are not the owner, you may want to find a video that has accurate captions, or put the video into Kaltura. Follow these steps to order and edit captions for your Kaltura video Links to an external site., or upload a caption file in Kaltura Links to an external site.


Modifications and Guidelines 

You can change the color and thickness of the transcript link border and the background color of the transcript by editing the highlighted text in the code.