Build Your Own Business Website header image

Supercharge your Video SEO with Schema – Part 9 – Creating and Displaying Video Playlists

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Let’s go on now to look at the video playlist function of the BYOB Video Publishing system. We’ll go back to the same post that we just configured to use video schema, Basic Bonds, and edit it. Under Post on this menu you can see there’s this video playlist section. Click on that.

Create the Playlists

I’m going to create a video playlist for the Bond Basics post. And Bond Basics will be the name of this playlist. Let’s come down here and save it. And while we’re at it I’m going to add another playlist. Let’s go to his Learning Center to choose one. We’ll use his Why Bother with Bonds. So, add that playlist. And now we’ve got two playlists.

Now we can come back over to Posts. You can see all his posts here. I’m going to do a quick edit of this post and here I can add the name of the video playlist I want, which in this case is Bond Basics. Hit update.

We’ll do another quick edit on this post here and again, it’s going to be Bond Basics for the playlist. So now we have a playlist created where it’s got all the right information that I needed.

Configure Video Template to Display Playlists

Next we’re going to go back to our Single Post template. Open up the video box tray and grab the playlist. I’m going to take the playlist and put it directly below the video source.

Choose a Layout for the Playlist

When you open up the playlist options here, you’ll see you have a choice of two different thumbnail image sizes, either a grid or a stack list. I’m going to choose the standard thumbnail and grid as the basic layout. This ends up creating a layout similar to the Youtube layout. These standard video thumbnail and tiny video thumbnail are Youtube thumbnail sizes.

Hit Save Template and let’s go back and look at this post now, Bond Basics. You’ll note that we have videos and titles sitting here like this and it obviously doesn’t look right. The reason is that we need to save our CSS.

Save CSS to Apply Changes

When we made changes to the template this created a whole bunch of CSS for us but it isn’t active at the moment so simply saving your template doesn’t finish the job. You also have to save your CSS.

You can do this a few different ways. You can come over here to CSS and hit Save CSS or you could go to Design Options, Skin Design and Save the Design Options or you could go to Custom CSS and save your CSS. Any of those things will regenerate your CSS so that this works.

How Do You Change the Archive Descriptions of the Posts?

Rick Van Ness, I’m going to unmute your microphone here so I can understand your question. Rick, go ahead.

Rick VN: In the archive session where it says this summary of each of the posts, we’ve made the content of the post just footnotes and credits so that that’s what shows. I can overwrite that by going into the Skin Editor for the Archive, right?

Rick A: Yes and what you would do is you’d use the video box again. And instead of the excerpt you would choose the description.

Rick VN: Yes, perfect.

Use Regenerate Thumbnails Plugin

Also what’s happening here is that we need to regenerate our thumbnails because we’ve got a bunch of thumbnail images created but we don’t have thumbnail images created that the plugin is looking for. So while we’re here, we’re just going to come over and go to Plugins and Add New and get Regenerate Thumbnails because this plugin creates two new image sizes.

We want to regenerate our thumbnail images so that we can take advantage of those thumbnail image sizes. And we’ve done that now so we just come over to Tools and hit Regenerate Thumbnails. We only have to do this once or you would do this anytime you change an image size. It takes a few minutes to actually go to go through the process.

Kevin asks, “Is it worth going back to save all posts?” Absolutely, because you want the SEO benefits on your older videos so absolutely, by all means do that.

We have this message. “To try regenerating the failed images again. Click here.” Favicon, we don’t need that, unknown failure reason. We have a whole bunch of favicons in there, isn’t that interesting? But, that doesn’t matter.

Let’s come back over here and refresh this post and now we’ve got thumbnail images that are in the right profile so this is one way to do it.

How the Playlist Works

What happens here is say we go over to our second one, it will show the first image, the third, the fourth and fifth. It doesn’t show the second in the list because it’s the current one. It shows the ones that you haven’t seen yet in the list here. So you’ve got 4 choices then in this.

Playlist Display Options

Let’s go back to our Skin Editor, back to our Single Post and get down to our video playlist. Now, we can do this with this tiny thumbnail image instead which can be a good choice if you have lots of videos or you can do a tiny thumbnail in a list as opposed to a grid. So we can have a list of the videos like that or you can do the big images in the list.

Add to a Sidebar

So that’s what you can do and it doesn’t have to be below this content here. You could actually, if you wanted to put it in the sidebar.

Let’s come over here and look at this playlist for a moment. Come down to our Main Sidebar and you could put the video playlist down there so it could sit beside the videos. Actually, I need to shift+drag Main Sidebar like that.

The website owner, Rick Van Ness, doesn’t want it because it interferes with this call to action but you could easily do it that way on another site. The other videos could show up here at the side and in that case, you might do the smaller image.

They don’t have to be down below, in other words, but they can be. They can be anywhere you want them in fact. But for the time being I’m going to keep them below the video on the post itself and I’m going to use standard video, display as grid. So now we have the rest of the videos showing up here.

Where to Find Help on Using the BYOB Video Plugin

Now, I don’t want you to feel like you have to memorize all this. I forgot to point out to you that there’s extensive help on this. Go down to the BYOB Thesis 2 Plugins tab on this menu and choose BYOB Video Plugin.

If you open up the Help tab, there’s information here that describes what each of these pieces are and how they might be used and then this shows you the playlist shortcodes.

Include the Playlists on Other Pages

So, another thing that you can do is to include these playlists on other pages without having to edit the template. For example, he’s got this Learning Center page and we could insert a playlist on this page if we want. Let’s edit the page and we can use one of the shortcodes.

4 Styles for the Playlists

Now, the playlist shortcode can be as simple as BYOB Playlist and if you do that it’s going to show you whatever happens to be the latest playlist you’ve created. However, you can also choose a specific playlist and choose a specific style. There are 4 styles and it’s the same styles I just showed you.

  • Style 1 is the default style and has a standard thumbnail size and is in a grid format
  • Style 2 has a tiny thumbnail in a grid format
  • Style 3 has a stack list with the standard thumbnail and
  • Style 4 has the tiny thumbnail and stack list

Add Playlist Shortcode to a Page

Let’s use the Style 4 shortcode as an example. Copy this shortcode. But we need to get the playlist id first. And you get the playlist id by coming over here to Posts and Video Playlist and then just hover over it. When you do that you can see down at the very bottom it says playlist&tag_ID=64. If I hover over this one it’s playlist&tag_ID=65. Bond Basics is the one we’ve just done and it’s id is 64.

Let’s come over to this page. It’s got a bunch of tables in here and we’re going to put it in front of that. We can put our shortcode like this, byob-playlist id=”64″ style=”4″ and hit update. Let’s view the page and now here’s the playlist laid out.

You could put a title here in the Bond Basics and then it will show these down like this or we could come back over to our byob-playlist style=”2″. If you don’t include a style, it will automatically go to the style=”1″. So if you don’t include a style and you don’t include an id then the style will be style 1 and the id will be the latest playlist.

Add a Playlist to a Widget

Anyway, this is how you can use the playlist. You can also put a playlist in a widget using that exact same formula. All we have to do is grab our playlist here and come over to Appearance and Widgets. Let’s add a Text Widget to this Main Sidebar and say Bond Basics. Save that and now it’ll show up in the sidebar. That’s really interesting, 1, 2, 3, 4, where’s 5? That is really interesting.

I didn’t notice before but in for a widget, I need to make these all equal heights. I’ve got a little piece of javascript that does that here in this case but it doesn’t do it in the widgets so that’s another thing I’ll fix. I’ll add the little bit of javascript that makes them all equal height so that they stack side by side or in top to bottom properly but besides that, those are the kinds of things you can do with it.

0 Comments… add one
0 comments… add one

Leave a Comment