Sometimes when working on websites it’s nice to include and/or produce a video to embed in the site to give it a little motion and variety. Embedding YouTube videos is a decent option…unless that YouTube watermark overlay featured in the YouTube player is driving you nuts. In that case, you’ll need to host the video elsewhere (like the server that hosts your website) and embed it without the easy-to-digest system used by YouTube.
If you want to embed a video into your website without using YouTube there are several ways you could approach the problem. Most of them will only be supported in some browsers, and all of them won’t be very…elegant.
HTML5 is a great option….or at least it will be a great option once old browser usage dies out a bit and once mobile and other browsers are updated to support the HTML5 solution.
Since browser support for the flash-based YouTube video player is pretty good, I like to use JW Player, which is a flash / HTML5 hybrid video player. It’s relatively easy to implement and will allow your video to play on Chrome, Safari, Firefox, Internet Explorer 7, 8 & 9, iPad, iPhone, Android, etc. It’s really the sleekest, best web video solution I’ve found and would recommend.
Whatever implementation of video you choose, there are two things to think about when getting video ready for the web: file format and file size. Both of the methods listed above work readily with .MP4 format, which I find to be one of the easiest ways to embed video in websites. The .MP4 format also gives you the option to include the ‘faststart’ property, which encodes the video in such a way that it loads more quickly from the server it’s hosted on. File size is also important because very large files will take forever to load from your average server and will drive your viewers crazy. I’ve found you can usually get away with ~10 megabytes or less and get good quality with fast loading and streaming times.
Either way, you’re going to want to convert your video to optimize it for the web. I was once delivered a video for a website that was in .mov format with ultra-high-def encoding which translated to a 1.62 gigabyte filesize. In other words, not web-ready in the least. To make video most accessible in .mp4 format and to decrease the filesize enough for quick loading times, you’ll want a program like Any Video Converter, which gives you a variety of input and output video formats to choose from, and lets you alter parameters of video compression to optimize filesize.
If you download Any Video Converter, you’ll find the interface pleasant to use (it even kind of looks like iTunes!). I’d recommend using the “x264” video codec for good quality (also I belive JWplayer mandates the use of that codec). Every conversion and compression solution is different, and you’ll probably have to play with your settings a little bit. Either way this program is a pretty good tool. Also it’s free! Well, sort of. There are frequent popup ads in the free version reminding you to go register, but if you can handle fighting off alert windows, you should be fine.
