I want to host my own videos for my website. What's the best way?

June 3, 2014 8:18 AM

The videos need to work across all browsers and devices. I'm having a hard time finding good advice. Can you help?
posted by markcmyers to Technology (13 answers total)

Can you explain a little bit more about why you need to host them on your site, versus using a service like YouTube or Vimeo (paid or unpaid)? That might make it easier to recommend a specific program or setup.
posted by mitschlag at 8:57 AM on June 3, 2014

The short answer is you realistically can't host your own videos and make them work across all browsers and devices. If you want to try, you will need to take each video and encode them in multiple formats, because different browsers support different codecs. H.264, WebM, and Ogg at a minimum.

Then you'll need to encode mobile-friendly low-bandwidth versions of each of those videos. And then configure everything so it sends the right video to the right browser on the right device. Which is non-trivial. But if you do it, then you can store the videos on Amazon S3, and use the SublimeVideo Player.

Really, unless you have extremely specific and unbreakable technical/legal requirements which exclude Vimeo or YouTube, you should use Vimeo or YouTube.
posted by Jairus at 9:01 AM on June 3, 2014 [3 favorites]

Response by poster: I want to host short videos on the site where I promote my book. I like the clean look of self-hosted videos, without all the YouTube, Vimeo, or other branding.
posted by markcmyers at 9:10 AM on June 3, 2014

Hearing impaired webdev book & video purchaser here: please include captioning!
posted by humph at 9:27 AM on June 3, 2014 [1 favorite]

You can get a Vimeo pro account ($200/year) and then embed videos without any of the Vimeo branding. That's a common approach and the embedded videos look great.
posted by Ignatius J. Reilly at 9:27 AM on June 3, 2014 [3 favorites]

As mentioned, a Vimeo Pro account will let you use an unbranded player. That would be the best way to do it.
posted by Jairus at 9:29 AM on June 3, 2014

Another option here is FlowPlayer. You still have to encode your own videos if you really must have them on your own server (and also pay for the bandwidth and space costs of hosting it - this is typically the reason I tend to recommend not doing this) but it has a ton of branding/skinning/etc. type things available. There is likely a plugin for whatever CMS you're using (assuming you're using one) that will allow you to embed it pretty easily in your site. They additionally have a Designer thing that will let you set up the player how you want. Do note that the free version has a flowplayer watermark; you can turn it off if you buy a license. The license is a one-time thing.

They also have a hosted service where you can store the video called Drive. The free tier adds a watermark and a time/bandwidth limit, but you can upgrade to remove/limit such things.
posted by mrg at 10:01 AM on June 3, 2014

Best answer: You can use the YouTube iFrame API to create a "chromeless player" for your site that will have minimal youtube clutter. Check out the player demo here, and uncheck "controls," "rel," "showinfo," and "search," and check "modestbranding." Then the video will be embeddable on your site with your chromeless player but you'll still be able to link directly to it on youtube if you want, and it will work on desktop and mobile devices.

I used this method to create the embedded video player on my site.
posted by ludwig_van at 10:21 AM on June 3, 2014 [5 favorites]

One vote against Vimeo. Something about it doesn't work at all on my Firefox browser.
posted by amtho at 10:59 AM on June 3, 2014

Best answer: You can upload videos to Google Drive and link/embed straight from there. It gives you a YouTube style player without the video being on YT. I use that with success across all platforms (though heavily filtered school internet won't allow it through...but no video gets through that really).

Plus: it's free.
posted by guster4lovers at 11:07 AM on June 3, 2014

Response by poster: Awesome, ludwig_van. Can you tell me how you were able to make your own pause, play, and fullscreen controls?
posted by markcmyers at 12:29 PM on June 3, 2014

Best answer: If it helps, my code is on github, here are the relevant sections of HTML and JS for my video player. Feel free to memail me if you have any other questions.

Note that the play button is initially hidden for mobile devices, because videos can't be started on mobile unless the user taps on the actual video. Once playback starts though, you can use your own buttons to pause and play.

I also set "pointer-events: none;" and "z-index: 2;" on the transparent player frame, and "pointer-events: auto;" and "z-index: -1" on the actual video iframe so that the video would appear to be behind the frame but still be clickable.
posted by ludwig_van at 12:41 PM on June 3, 2014

Response by poster: ludwig_van, thank you so much.
posted by markcmyers at 12:53 PM on June 3, 2014