Transcripts and videos are one in the same thing. Having them on a separate page can be quite a frustrating experience.

Let's take a look at other examples

Lynda.com has the transcripts right below the video:



This allows for easy reading and watching at the same time. And the current line is highlighted for easy access.

Youtube had the "transcripts" right in the video, so no need to scroll if you have a smaller screen.

I recommend easy access so you don't have to have the user jumping from place to place.

Where to put video transcripts?
I asked this before, but still not successful. Hope someone can help me now... In the fiddle you see a responsive menu that has 4 menu-items horizontal inline when it is larger than 1000px. Smaller than 1000px the menu shows a nav-btn (now a RED box!) that onclick shows the menu-items, but when open and close and resize to larger than 1000px the rest of the 3 menu-items don't show up. I did some tests with media queries but i think the solution must be find in the javascript part. Anyone can handle this challenge?

Here the FIDDLE

$(function() {
$('.nav-btn').click(function(event) {
$('nav ul').fadeToggle(300);
});
});

