Build Your Own Business Website header image

How to Add Self Hosted Videos to Your Site – Part 7 Add HTML to the Video

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

This is Part 7 of How to Add Self Hosted Videos to Your Site series and in this session we talk about how to add HTML to the video. We show how to add a splash image using an HTML code generated from the WordPress post editor.

Video Transcript

And now, we’re going to talk about… we’re going to do Part 7 of our continuing series on how to add videos to your site and Part 6 ended up… I’m going to jump back over here. Oh no, that’s not the one. Part 6 ended up with us creating a splash screen for this video using the FV WordPress Flow Player.

So in Part 7, what we’re going to do is we’re going to add some HTML to the end of this and the first thing we’re going to do is we’re going to add a straight link. And then once we’ve added a straight link, we will add an image link instead. And then in Part 8, we’ll add this plugin to a sidebar.

So let’s go ahead and go to our dashboard and go to Posts and this is the post here. And so, if we’re in our Visual Editor, here we have this… this is the video that’s showing right now. I’m going to come down and insert another one of those. This here is the short code to use to add the video. So we’re going to add the Flow Player video. The first thing to do is add the address of this video. Now, I have stored this in my… let’s see, In my Videos folder on the site and the next one that we’re going to do is actually create a custom post type.

And so, this is the name of that video and that’s what I need to capture there. It’s the name and I could just put the name of the video there and then the width of that video is…we’re simply going to put this in… I think it’s actually 560 and the height is 420 and then the splash image we’re going to put in… let’s see, I am going to open a new page actually because I need to grab that URL from my Media Library.

And so let’s see, creating a custom post type, that’s the image right there. So we’ll edit that and grab that image address. We’re going to put the splash image address right there and now, what we’re going to do is we’re going to add an HTML pop-up. And this is where you would actually add HTML text here and so you can… if you’re not comfortable typing HTML in, you can use my sandbox idea which I teach in other classes.

If we come over here for a moment, for example, to Add New Post and let’s just call this post our sandbox post. And so, the sandbox is a place I’m going to experiment and then I’m just going to make it private, so okay. And then I’m going to say, let’s see, join today. “Join our site today.” Okay, what I want to do with that is I want to make that an h2 tag and I want to make the color bright red.

Okay so I’ve formatted that in my Visual Editor, come over to the HTML, and copy it and then come back over to the HTML pop-up and paste it. And then we’re just going to let it go at this. We’ll go ahead and say insert and update and then view the post.

Okay so here’s our new video. We’ll press and then we’ll go to the end and see what happens here. We’ll have to wait for it to download. Okay so there we go.

And so there is the heading, “Join our site today.” And if we didn’t like the way that looked, we could change that you know, back in this Visual Editor and make alterations or changes here. But that’s sort of the first, simplest thing to do is to add this bit of text as an HTML.

So then the next thing that we could do is to add, rather than simply adding text, we could instead add a text link. And so, what we’ll do then is we’ll go ahead and insert another video and this time, the video we’re going to insert is the 3rd one in the list. So let’s see, that one is custom post type configuration so we’ll copy that name, paste that here. Again, it’s 560 by 420. The splash image is… let’s see, let’s go back to the Media Library and the splash image is this one here so we’ll edit it. We’ll get a copy of it, come back over and put that splash image in the splash image dialogue. And now, in the HTML pop-up what we’re going to do is have a button that pops-up that says, “Learn More.”

And so, we’ll come back over to our sandbox and we’ll just delete all this stuff. Yeah, let’s just delete everything and we will create a… we’re going to insert an image link and so what we do is we add an image and we’re going to add it from our Media Library. And we’re going to use this “Learn More” button that I uploaded.

And so, I’ve given the title, “Learn More About Creating Your Own Website” and then what I’m going to do here is rather than giving it this URL, as a link URL, I’m going to give it… let’s see, we’ll center it and we’re going to give it a different link URL. I’m going to have it link off to my webpage. So http:… just grab Okay so when we click on this image link, it’ going to link off to this. And what I’m going to do is say insert into post, come back over to the HTML, grab that HTML, come back to here and paste that HTML and say, insert and update. And now, we’ll just refresh this again.

And here’s our 3rd video, Part 3. And once we get this whole thing downloaded, we can get all the way to the end. And it’s just kind of interesting actually, it does this sometimes and this might actually be a function of its compatibility issue with WordPress 3.2. I would’ve expected this to change because it didn’t do this several weeks ago when I was trying this. But yeah, so it’s given us the image here twice but we can just go ahead and click on that button now though and it takes me to the page. So it does what we want it to do.

So that’s how to add HTML to the end of a video.

0 Comments… add one
0 comments… add one