---

 

 

Hi, this is the first of two tutorials on putting videos all on a single page on your website. When we set up a fast forward stories library, we send new customers a chunk of HTML, the code that makes a webpage that will bring the entire library in and place it on a single webpage on just about any website platform in the world. That file it used to be called library dot. HTML. We finally woke up and realized that the problem that creates for people is that if you double click in HTML file, most computers will actually launch a browser and you don't want to view this in a web browser. You really want to view it in a text editor. So if you've got a library, that HTML file, save that file to your hard disk and change the last letters after the.to T X. T. it's a text file.


And this way it'll open on most computers in the, in the default text editor, we've now changed that file name. It's now called one page library dot text dot TX T so it should open in a text editor. This is a g-mail demo. So if I click this here, Gmail actually pops a text editor window up, which is kind of convenient. Here's the key thing. All I want is what was in that file. So I'm going to select everything from within that file, all that, uh, complex looking HTML, which is actually not that complex and copy it. Now I'm going to jump over to Weebly. Weebly is a mainstream sort of lightweight web page, website creator. We use it for demos because it makes things nice and visible and the way your web platform, whatever it is, works will probably be similar. The key thing is in Weebly and another platforms, we want to be able to edit the underlying HTML code in a webpage.


In the case of Weebly, I'm gonna put an embed block, which is just a container that lets me put the HTML code in without Weebly trying to interpret it and I'm going to paste all of that stuff in there. It'll crunch and munch for a second as it renders that, paste it in HTML code. And you noticed that the window changes changed sizes. I'll talk about that in a second. But there's the entire demo playlist, which in this case is 150 plus videos, um, arranged as a series of windows and then a series of titles beneath each window. Let me show you what that result looks like. On his demo page, there's the first video window, there's a set of titles. Now, their video window set of titles. We arranged it this way intentionally realizing that our libraries are of a variety of sizes. The titles don't take up much space, so you can get hundreds videos on a single page and it's not nine miles long. People can still scroll down and look through the list. We try within the limits of guessing at sizes to keep the set of titles within sight of the video window above. So you'll notice on this top window, which started with the what disclosures are used for loans not covered by tread. If I click on one of these, it hijacks that window and starts playing this information. So these first 1215 videos beneath the top window, we'll all play in that top window. If I scroll further down  next window, next to videos play in that window. So the essential steps you need to understand in terms of getting more library on your website is that you want to find the launch email from us. Find either one page library to text or library dot HTML and find a way to open that library in a text editor. So this one I renamed from HTML to dot text. It's the same, it's the same code. Get that set of code, copy it, get yourself back to whatever you use to edit your website and find a way to get yourself in source code view. That's what us geeks call it. So you can see the underlying HTML code, paste that in and you should get a single page library on your site just about that. Quickly. Watch for the other tutorial explaining the innards of that HTML if you want to rearrange it or make smaller sets of videos for additional pages on your website. Last note by default, since mobile viewing is on the increase everywhere, this one page library is set to adjust itself to the size of the bounding box, the bounding div, the available space on a webpage. You noticed that that window went from little, I believe it was about 520 pixels to complete max size of the column. That way if this website is viewed on a different device, that stuff will still fit and will fit as fully as possible on the screen you're using. The generic term for that is responsive and responsive website, so don't be alarmed if these don't show up in the size you see in the underlying code. That's because we assume you might want to use these on a website that someone can view with a phone or a tablet or something else. Look for the second tutorial. If you want to make a little more detailed use of this HTML. If you have other questions, email us@helpatfastforwardstories.com. That's it. Thanks.

---