---

This is a second tutorial on the technical underpinnings of the one page video library HTML that we provide to subscribers. As you'll recall, the quick recap from the first tutorial when we set up a new video library, we also send a file sometimes called library dot HTML, sometimes called one page video library dot. Text the ladder. Now that we've realized that it's easier. Um, inside that file is a bunch of HTML code with the titles and the embed codes for each subscribers. Specific library of videos when that's put on a website, in this case, a demo Weebly site, it looks approximately like this video window series of titles, video window series of titles, and the titles play up in the window above. That prevents the mistake of loading dozens or even hundreds of individual video players, which can really slow a webpage down.


And we've tried to balance how many player windows there are with how many titles there are. So there's always a window in view of the list of titles. The purpose of this tutorial is to show you how that thing is put together so that if you want to rearrange your library, you can do that starting with the HTML code in that one page, video library dot text or library dot HTML. So here's the library dot HTML from that demo library, every named it dot text and open it in a plain text text editor. I'm going to use word to break this down so we can do a little bit of color coding, a little bit of annotating, but I just wanted to show you all of this stuff inside. It's not as hairy as it looks. The first line here is one time on the page only and it loads a script from our underlying video platform. Wistia, so this one line inside your website says, Hey, go get that script out there on the net@fastdotwistia.com it needs to be on the page where you've got videos loaded in this fashion. If you break up the playlist, and I'll recap this later. If you break up the playlist into multiple pages, you'll need to copy that script tag as it's called a second time. The next line is what makes the player window in that demo site. So this player window at the top is a result of this line here. It creates a div, which is an HTML on component, a dividing block block. I'm not sure what the origin is, but it creates a window, a block window, the HTML page, and it starts at this size. It actually resizes itself to maximum space available. I'll touch on that once we've pulled this apart a little bit after that. Diff is a series of simple links. They're called anchor tags too, that say hi Jack, that window above me and play this other video in that window. So let me jump over to word and take that apart again. I'd help foot blow that up a little bit. So first-line here, let's make that red.


That's the script tag. Don't forget that little open carrot. So that's the script one required one time on the page. So there you go. This group take one time on the page. Second thing, let's highlight that with a different color. Second thing is a div, so this is creating, this is basically create a blog with you name this case, good list. You'll notice, let me grab a different highlight color. You'll notice part of that is an ID value div ID equals tread list. So this square block, rectangular block I guess on this webpage actually has a name tread list that other parts of the HTML can refer to and use and I'll show you where that comes into play. Let's make these yellow. So here's my first title. Let's break that apart. Actually I'm going to get rid of that highlight. So first I've got the actual reference to the video. These 10 characters here are unique. There are unique reference to that copy of that video with this branding applied to it. No other video has the ID, T eight X five and et cetera, et cetera, et cetera. It's unique, unique reference that way a Wistia knows which video to fetch and to bring in here. Second parameter to pay attention to is this container equals in this case, container equals tread list, which is go play yourself up in that ID tread list, div block.


So this tread list here points to this trade list there. Let's double click that she had visibility trade list tread list. Let's come back and we do this highlights video ID there, container parameter there. Okay, and then this is the actual title of the video, so want them to correlate. You want the title, what lenders must disclose to be accurate if video T eight X five N et cetera, et cetera, is actually that video. The other anchor tags line by line. Follow that exactly the same setup. Here's the ID of the video, here's the container, and then there's the title following it. If I wanted to rearrange the set of playlists from this library, let's say I wanted that important additions to closing disclosures to play in the next window down so it fit a little bit better on my website. Just starting from here, this other div here, the second day of has a different name. It's called starting list. See that parameter there. So if I change this value starting list, if I can change the container equals value in this one above is closing. Dick's disclosure video would actually play in the window beneath in the D of right underneath it rather than the deal above it. So let's see if we can go on the high wire and actually make that happen in Weebly here.


What do lenders have can be a little difficult to get Weebly to go into edit mode so it doesn't work. I'm going to scrap it. Copy tell you what, let's just remake it if you could. This is a demo of embedding a playlist all over again. We can to get rid of that embed block, delete, put a new embed block there, click to set custom HTML paste that whole thing in there. We're going to scroll away. Back up here. I prefer to do this into text editor rather than in the actual embed blocks because it can get a little fussy trying to see everything we're looking for that last one. Closing disclosures, important additions. We're just going to change the reference. So instead of continuing equals starting list or trade list, we're going to say container equals starting list. Close that, publish it, chunk. Weebly saved the pieces. We're done. No, I'm going to upgrade in this case, I'm going to refresh this. I noticed the window goes from little to big. It's responsive. There's a parameter called video foam that says make yourself resizable so all of these are playing in the window up with a little slide over parameter, but this very last one is going to play in the window below and that's because we changed that container reference to say point to that other dev so you can rearrange all of the pieces of this HTML to suit yourself. In fact, you could put the same videos multiple times in multiple pages on your site if you wanted to. If I wanted to take just a bottom section and put that on a page by itself, it's almost complete when I do that idea of ideas starting list. These all refer to starting list. The one thing that I'd have to do is make sure that I brought that script tag over and included it.

 

Otherwise, the code necessary to make all this stuff work won't be pulled into that page. That's the function of that script tag. Last thing I'll mention one more time. There's a parameter, I'm highlighting it right at the top right there. Video foam equals true video foam equals true means make yourself resize to the maximum horizontal width of the continue you're sitting in. If you decide you want the windows to be a smaller, like the default size here, five 20 by two 93 you could do a global search and replace and say video foam equal true, make it video foam equal false and keep that capitalization. If we did that, all of those dibs, those half a dozen or so player windows are now going to stay a fixed size. So that's the only change you need to make to get rid of that responsive parameter. We don't recommend it because responsive is good when more and more people are using cell phones to look at things. That's it. Thanks.

---