How to Add Self Hosted Videos to Your Site

Difficulty Level -

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.

There is an UPDATED VERSION of this video in a six part video series. Select this link to go to the first video: Self Hosted Videos

The question was asked how to host your own videos and how to and how to add them to your site.  This is different than how to add YouTube or Vimeo hosted videos.  When hosting your own videos you need a player that will allow you to add the video to the content of your page.  In this answer I demonstrate how to use the plugin “FV WordPress Flowplayer” to add videos to a post or page.

Select the link below to watch a high definition version of this video

Video Transcript

I’m going to do a quick little demonstration that Vannu asked me to do last time that I didn’t get the chance to do which is how to add a video to your site or rather how to add a self-hosted video to your site.  Obviously adding a regular video is pretty easy.  Adding a YouTube video is pretty easy but if you’re going to host your own videos, I’m going to show you how to do that here in this category website.

What we’re going to do is add a page.  Now first, let’s go get the plug-in.  The plug-in that I recommend for this… I don’t actually use this plug-in myself because I purchased the commercial version of this…but for a free version I recommend a flowplayer.  Now if we just search these plug-ins for flow players…if you know anything about open-source video on the web, you know that there are 2 open big open-source players.  There’s JW Player and there’s Flowplayer.  And they both are available to use for free for a non-commercial purpose but I have a commercial license to Flowplayer because obviously I’m doing it commercially.  Also I didn’t want their little logo to pop up.

So because I have a commercial version, I actually use this flow player wrapper rather than FV WordPress Flowplayer but we’re going to install this one because it works quite well.  So activate the plug-in and again it is, FV WordPress Flowplayer.

And then what we’re going to do is we’re going to come down here to their settings section, we’ll turn it off.  We’re going to go ahead and have auto-play be false, auto-buffering be false, pop-up box… we’ll pull out… enable the full screen mode.  We are going to… fit scaling. I think if we leave it as false, it won’t stretch so we’ll leave it like that.  Allow user uploads… that means can you take it…share it some place.  That would be true or false.

And then, do you have a commercial license?  If you do, you can put the key in there and so on and so forth.

We’ll go ahead and apply those changes and then all you have to do here is you take this little short code.  And in particular, this short code is flowplayer src example.flv…we’ll go on ahead and just copy this. You will come back over to a page… let’s see… in fact, we’re just going to add a new page and this page is going to be video example and we’re going to say on this page, “This is an example of adding a video.” Make sure we’re on the HTML view and place that short code.  Now this src has to be the address of the video.

So what I’m going to do now is open up my Filezilla here and I am going to go look to where I have some videos stored.  And let’s see here…and I guess what I’m going to do is  grab this one here and so I’m going to copy the URL to the clipboard and then come back over here and paste that URL. Just go like this… it’s going to be http://www.byobwebsite.com and otherwise, there’s the address.  If I hit publish and we go…whoops.  There we go.

When we come over here to view the page, there’s our little Flowplayer, there’s our video, and so that is your full screen mode.  And that’s the small screen and if we want to make it display larger than this, we would come over here and we would give it a different… we would add heights and widths.  And so, let’s go back down here first though and take a look at the codes for that.  We’re going to open the Flowplayer and the…I hate that autoplay stuff.  And when you look at the optional parameters, you can see that they’ve got these additional parameters that you can add like width, you can add a Splash image and you can add autoplay and stuff like that.

We’re just going to go ahead and take this width of 680 x 480, copy that, come back over to our example.  paste.  Now update that or refresh it.  Now if we wanted to add a Splash screen to this, because right now you can see it doesn’t show, it just shows a big white space.  If we wanted to add a Splash screen to this, we could come over to my website and on my regular site, I’m going to go over to my library.  We’ll just pretend it’s this one here…this Splash screen.  We’re just going to steal that URL and then we’re going to come back over here.  We’re going to add that…space and it’s going to be splash equals… I think we’ll just paste that.

Let’s go back and look at this for a second.  So splash equals, yup… just add the rest of the image.  So we update that again.  You’d know our video example when we refresh it and now the splash screen comes up and you can press that and so on and so forth.  So it’s fairly easy to add a video like that to your website using that little plug-in and you can put another video down below this as well and all you need to do is add another… I think just copy this one…paste it and I think I’ve got a 4c video there as well so we hit update now.

Then we’ll refresh this, play it….nope, I guess I don’t have a 4c.  Oh I don’t have that one with that name but you get the idea.  You just put another one in here with the right name and it’ll work just fine.  Okay so, that I think wraps this up.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!

{ 1 comment… read it below or add one }

Venu Reddy December 13, 2010 at 10:02 am

Thank you for nice explanation. Example shows adding multiple videos one below other , can we put two videos one after the other ( side by side) ?

Reply

Leave a Comment