Build Your Own Business Website header image

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.

Lesson 10 – Part 6 – Secure Mobile Video from Vimeo

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

The next thing we’re going to talk about is Vimeo hosting. This is essentially how to get all this in Amazon S3 and S3FlowShield, but remember last week we spent a bunch of time talking about how to make this work in mobile. And if you’ve got a mobile device right now and you go to the site you’ll see that this doesn’t work in mobile because it’s a flash-based player. So we also need a mobile version of this player.

The way we’re going to do that is by using Vimeo, which I did talk about last week as well. So we’ll go over to my Vimeo account, vimeo.com and I’m going to log in. Ok here I am on my Vimeo account. This is a Pro account which means that I have 50 gigabytes of storage and 250 thousand plays available to me per month. If we look at my videos, how many videos do I have? 654 videos currently loaded on and still adding videos yet to this to get all of the rest of our site mobile. You can see the majority of the site videos, 650, are now available in a mobile format.

Upload a Video to Vimeo

I have these videos organized by album, which is the easiest way to do it. We’re going to start off though by uploading a video. So if we come over here to “Upload a video”, choose the file I want, and I’m going to upload this one again, open it. Now what you do is you give it a title: “How to install WordPress and Thesis – Lesson 1 Part 1.”

Then you can give it a description, but unless the video is public the description doesn’t matter. The only reason why you’d give it a description is if the video is going to be publicly available on Vimeo for people to find. I’m not going to make this one that way so I don’t need a description. Same thing is true for Tags. If you want your video publicly available for people to find out on Vimeo then you want a description and you want Tags, but if you don’t then neither of these have any value.

Vimeo Video Settings

Next we come over here to Privacy. This is a Pro feature. There’s a feature that’s very similar in the Plus account but there’s nothing like it in the standard account. This is why you need either a Pro or a Plus account in order to do this. And the way this works is, if you want to secure your video you want to “Hide this video from vimeo.com” so that nobody can find it. You probably don’t want to “Enable a video review page.”

You definitely want to control where it’s embedded. And again this is a Pro feature buy it also exists in plus. You only want to embed it on an approved site and here is where you can set the domain or domains where it will be embedded. The way this works is if somebody copies your video or copies the URL to the video they can’t make play because Vimeo won’t allow it to be downloaded to any site other than sites you specify here. In this case we’re just going to say www.thesisemember.com, and you can add as many domains as you want in order to make this work.

Since it is private you don’t want anybody else adding the videos to groups or channels or albums so we’re going to take that off. And we might as well have nobody post comments on it either since it’s all hidden anyway. Those are your privacy settings.

Under “Credits,” credit is automatically given to you so you can look here if you want but at the moment I just leave it to myself. “License”. I think is important to select a license here, and what I use is the Creative Commons license which doesn’t allow any other commercial use and doesn’t allow derivatives from it. When we go to “Add to” I definitely add it to an album.

What we’re going to do is create a new album and we’re going to add the video to this new album. I’m going to call this my “How to Install WordPress and Thesis”. And then the album is going to be for “free lessons on Thesisemember.com.” So we’re going to add that, and we’re going to add it to this album.

One thing to know about albums is that if there’s any video in an album that is public, then all of the videos in the album will be public. So you want to make sure that you indicate that it’s going to be private, you only add private video. I actually am going to let the album be public but right now it is private because I’ve got only one video in it and that video is private.

However you can see that I have “Customize Thesis like a Pro – Private” and “Customize Thesis like a Pro” and the reason is that some of these are public, so I have an album for each one. With 654 videos on the site it’s important to be able to organize your videos somehow, so I use albums for that purpose.

Then we come down to “Photos,” you can skip this. Come down to “Embedding”. Again there are some Pro options here for you for embedding and the way you can do this is we’re going to create a new pre-set and the first thing is we’re always going to hide the portrait, we’re always going to hide the title, and we’re always going to hide the byline. And we’re going to have nothing for “Outro.”

Look at some other of my pre-sets, for example look at the “BYOBTypical” pre-set which is currently assigned to videos. This is how it is setup. And then I use custom color, and I show the share button, I show the player, I do not show the Vimeo logo, and I don’t currently use my own logo on the videos which is why my videos look different than the standard Vimeo thing.

We come back over here to Thesis eMember and I’m going to change that to say “always hide,” “always hide,” “always hide,” and “nothing.” Let’s pick a color here. I think I’m going to pick this color right there.  Come back over here to this Vimeo upload, here’s the color I’m going to use. I’m not going to do that, I’m not going to show the “Like” button or the “Watch Later” button,” we’ll show those things but no Vimeo logo. And we’ll save changes.

Embed a Vimeo Video

So now if we go over to our video and select embed, here’s that color used on the videos so this is what the video player is going to look like. Then you have a choice of embed codes. Right now what you’re looking at is the new embed code, and this new embed code starts as “iframe” and this is the code that will automatically adjust for the mobile devices. You can also instead use the old embed code. And if you use it this does not automatically adjust for mobile devices but it does allow you to create a manual video sitemap off of it because it has the requisite information to get that sitemap.

So at the moment we’re going to stick with the new embed code. However, it is too wide. We want it only to be 600 pixels wide. So the way it’s going to be 600 pixels wide is by changing the embed code. Come down here and we customize our embed options and all we really have to do is set this size to 600 and it will automatically switch to 338 here.  And now we have our embed code. We can copy this, come back over to our page, and paste that directly below there. So we have two copies of this video. We hit update, we refresh. So there’s the video here.

This is the Vimeo version of the video here, and this is the other version of the video. You can see yellowish color that we put in the player color. After a few minutes of going through this process, a couple of other things happen. Once it’s fully loaded, and HD versions of the video are created and everything else, all the sudden you get this “Thumbnail” choice here where you can pick the thumbnail that you want to use. Right now it is using this thumbnail. If we come and look at the page where it’s being displayed, there it is using that thumbnail right now. But you could move around here and pick a different thumbnail if you want, or you can upload a thumbnail separately if that’s what you wanted to do. We’re not going to do that. But that is where you can set the thumbnail for the video.

Then under “Video file,” this is another thing that wasn’t here before. You have this choice of replacing the video. So let’s say you don’t want to go back and change your embedding or anything like that but you updated the video and you want to replace the video that’s being referred to with this embed code to an updated version. All you have to do is “Choose a file to upload” and it will replace the video with a new version and then you can check to “Upgrade to its highest quality”. That is where it is right now actually because of how I have my settings. It automatically creates the HD version and the mobile versions of all the videos.

You have one other set of choices here. If you want Vimeo to host the video but you don’t want to use the Vimeo player you can instead use your own player. You can use these three different URL’s to place the URL of the Vimeo location in your other players. For example, FV WordPress FlowPlayer could be used that way. However, I don’t know why you would bother with that. We don’t do that.

You do have the choice of having it in HD version and having it in a mobile version. So if you come over here to your “Me” and “Settings” you’ll see that you’ll have under “Preferences” you can set these video preferences so that it only shows up on approved sites. You can set these settings in advance if that is what you want to do it. Including: “Make mobile versions of my videos” and “Make HD versions of my videos.” Since I have those things set, the options for that video had already been set to make a mobile version and make an HD version. But if you don’t have it set that way you can set it here. Maybe you don’t want all your videos to be made a mobile version or HD, so you could come over here and say this one I want this one HD and I want this one mobile. So that is where it would happen.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment