We just completed all the video details in a post that we created using the BYOB Video Publishing System for Thesis 2 and now we’re going to configure the templates to display them. Because as you just saw, the details are there but aren’t yet being displayed.
Create a Custom Template
Let’s come over to the Thesis Skin Editor and I’m going to create a custom template for this. So I’m going to say Add New and this is going to be a Video Blog Post template. I’m going to create that template and then I’m going to copy from the single template. Essentially, it’s going to be a copy of the single template but I’m going to add have other things in it.
Add BYOB Video Box to the Content Area
Let’s open up the Content Area and get to our Single Post Box. Here we’ll add the BYOB Video box which can be now found here. Shift+drag that in and drop it into Post Box down below Post Image.
We’re not going to use the Large Image ever so I’m going to drag that out. Then if we open up our video box you’ll see we’ve got all of these different video details that we said we’re going to use.
Configuring the Individual Video Details
Now, there’s also a tray and in the tray is the Video Playlist. We’re going to look at that here in a few minutes but you can hide the tray. If you change your mind about some of these video details, you can always just drop it back into tray just like the Post Box or anything else.
We’re going to move the Video Source up here to the top and just below that we’ll move Video Upload Date and Video Duration. Video Description is going to go up below the video itself. Video Thumbnail will go below that.
Then my Full Transcript is what is actually going to replace the Content so we don’t need that here. Shift+drag this out, drop it into the Single Post Box, drag it down to beside the Content .
Then I’m going to shift+drag the Content right there out of the Post Box because I’m not going to use the Single Post Box Content anymore. I’m going to use the Full Transcript instead. It still gets its information from the same place but it adds the appropriate markup.
Configure Settings in the Video Details
Then the other thing I want to do is go into video upload date and choose meta only. In Video Duration I’m going to put “Running Time:”. This will be displayed before the video duration. Then I am not going to display the video thumbnail here but I want the markup for it.
I’m not going to display the author name either but I want the schema markup for it. The same thing is true for company name, video quality and finally, video encoding. This is all just going to be markup, it’s not going to actually show up on a page in a visible way. Let’s save that.
Set Schema to Video in the Template
The other thing we have to do before we leave the Template is set the Schema to this to video. So we’ll go into the Post Box that we’re using, set the schema to video and save it. Now we’re going to have the full markup associated with this.
Use the New Template in the Video Post
Let’s come back to our post and choose that new custom template. So we’ll choose the Video Blog Post custom template and update it. Let’s view the post and now there’s the video here. You can see the running time is showing up. There’s the description, here’s the title.
Where to Check the Applied Schema Markup
We begin by inspecting our element. If you aren’t familiar with how to do this, you can watch Introduction to HTML for WordPress & Thesis 2.1 Users – Part 2 – Tools of the Trade to learn more about how to use tools like these.
So, here’s where it starts. This is the beginning of the itemscope which is the VideoObject, it’s got the schema.org/VideoObject on it and then we’ve got our header with the itemprop=”name”, we have “post_author” which is different than the video auhor actually.
Le’ts get down to the video part and we have a “video_player”. The “video_player” has the “contentUrl” being displayed, it has the itemprop=”description”, it has itemprop=”uploadDate” with the upload date in a format that is required to be displayed in. It has the “video-duration” in the format that it’s supposed to be displayed in.
It has the itemprop=”thumbnail”, the video “author” in this case as opposed to the post author. So it’s got the video “author”, it’s got the “productionCompany”, the “videoQuality”, “encodingFormat” all showing up here.
So all of the schema markup that Google wants to see on a page when a video is being shown will be shown here.
The other thing to note is that when you shrink it, it gets a nice smooth shrinking size. It doesn’t have any weird bars or anything like that added to it which is what would normally happen in this case.
This works for all your basic embedding video sharing systems like Youtube, Vimeo, Dailymotion, Blip.tv. There’s actually a really long list of these things that it automatically works for. It automatically works for anything that WordPress will automatically embed. So if WordPress will automatically identify the embed then this will work just fine.