How best to rework a webpage with too many embedded videos, and more on the way?

[T Melville]

I've looked around the site a bit, and this seems like the best place to post this. Our website gets two new videos embedded per week, sometimes three. The newest video gets a featured spot on the home page. When a new one comes along to replace it, it gets moved to a page for our older videos, still embedded. I knew that would become a problem over time, figured I'd deal with it then. It's then. The page is only embedded videos. I just counted 56. Loads almost as quick as it sounds like it would. I want to clean it up. There are ways to do so that are so simple I can figure them out. I want to figure out the best way to do it, for the best user experience and to make it easy on myself. I don't care if it takes a few hours up front, but I don't want to create a perpetual chore for myself.

Obviously, I could leave the five or so most recent embedded, convert the others to links. Hopefully arranged into monthly folders. (Yearly too, later.)

I could create a playlist and embed that. That would work for the youtube videos, but there will be facebook videos too, when I get the URLs. I don't know how they'd fit into that plan.

I'd like to put one embedded player, with the links below it in an expandable tree view grouped by year, then by month. The link you click would play in the one player. I've no idea how to code that. I don't know how the facebook videos fit in. I think there's an html5 player that can play both, but I don't know which devices or browsers would support that.

I guess I'm looking for any ideas or advise. Failing that, I guess I'll go with whatever's in my current skill set. Thank you for reading.

[Tim Holloway]

Well, I hope that those videos aren't auto-playing. One auto-playing video will send me to someone else's website ASAP. Multiple auto-playing videos is cacophony. To say nothing of wasting network bandwidth.

OK, I make an exception for YouTube, since the sole purpose of YouTube is to play a selected video (regardless of what Google thinks). But if you'll notice, YouTube has one main video and the rest are hyperlinked thumbnail images. Which is what I'd do.

Since videos on a webpage each have their own URL, it's really just a matter of keeping a FIFO list of video URLs and that's easily done in any database. Just sort the table of URLs by the date/time they were added, putting the newest one in the primary spot and selecting thumbnail URLs for the next 10 or so as needed. You can also make this a multi-page scroll if you want access to older URLs.

Here's an abstract example of a database table for that sort of thing. I AM assuming you'd automate this and not simply have someone manually editing the web page itself!

CREATE TABLE DISPLAY_VIDEOS (  ID                                  NUMERIC,     -- primary key  ADDED_TIMESTAMP  TIMESTAMP, -- when we added the video to the database  VIDEO_URL                 URL,              -- actually probably "TEXT', but I wanted to be clear  THUMBNAIL_URL       URL               -- references a JPEG, PNG or other thumbnail image );
Refine as needed

[T Melville]

I've never learned to work with databases, but I've been watching for a reason to learn. Over the next day or two I'll look over your reply and see if I have enough foundation to build an understanding of databases on.

[Tim Holloway]

Working with databases is easy in Java and, for that matter, on most of the popular web frameworks. The big hurdle - aside from needing to learn SQL - is that most databases have to run as an independently-managed program. So it's one more resource you have to have an "expert" on.

You don't actually have to use a database to do what I described. Since there's only one table involved, you could just as easily keep a file in plain text format and add new items to the front of it as you add videos.

[Caleb Cruze]

Try to embed a playlist & add videos to that later:

Embedding a playlist

Sign in to your YouTube account on a computer.

On the left side of the page, select the playlist you want to embed.

Copy the playlist ID from the URL.

Modify the embed code for an individual video by doing the following:
In the place of the video ID (after "embed/"), substitute "videoseries?list=".

Then paste the playlist ID after the "=".

Paste the code into your blog or website HTML.

Example:

<iframe width="560" height="315" src="https://your URL" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Regards,
Caleb

[T Melville]

Caleb Cruze wrote:Try to embed a playlist & add videos to that later:

This is more or less what I went with. The videos fit into four categories, so I created four playlists. I put each one into what word press calls an accordian. I'd call it a drop down or a pull down. Turns out that after live streaming on facebook, the videos are then uploaded to youtube, so I can put them into the same playlist(s). In fact I did, unknowingly. I then sent a link to the sample page where I did this to the webmaster and the CEO. The CEO didn't respond. The webmaster said he'd take a look and let me know his thoughts. That was on the 14th. I figure the ball's in their court.