Showing a Video from Your Media Library

Although a free video-hosting service meets most people’s needs most of the time,
self-hosted WordPress sites can host their own videos. The basic approach is pure
simplicity:
1. Click Add Media above the post editor.
This opens the familiar Insert Media window, which you used to add pictures
and picture galleries earlier.
2. Drag your video file onto the Insert Media page.
Not any format will work. And, confusingly enough, there are more video formats
than Ben & Jerry’s ice cream flavors. For best results, you should use a
video file encoded with the high-quality, wildly popular H.264 video codec, and
stored in the MP4 container format. If your file has the extension .mp4, you’re
off to a good start.
TIP If you don’t have an MP4 video file on hand, think carefully before you continue. If you upload a different
video format, your video player may not work on certain browsers, on mobile devices, or on anything, actually. To
straighten out the format of your video files, consider a good video converter like the free Miro Video Converter
(downloadable from http://www.mirovideoconverter.com), which can convert almost anything to MP4 format.
Depending on the size of your video, you may have a bit of a wait. Grab a cup
of coffee.
3. In the “Embed or Link” setting (on the right), pick Embed Media Player.
Your other option is to add an ordinary link that points to the media file.
4. Click “Insert into post.”
WordPress slots your video in using the shortcode.
At the end of this process, expect to see something like this:

Here, the shortcode specifies the size of the video window (based on the
dimensions of your video file) and identifies the video file stored on your site. When
you publish your post, the shortcode creates a video window similar to the one you
got with YouTube.
Although the process seems easy, plenty of caveats apply. First, it’s up to you to
make sure that you have the not-inconsiderable space to store the video file, and
the monthly bandwidth to show it to all of your viewers.
It’s also up to you to make sure you use a video file format that most browsers can
play back. The previous example uses the most popular standard: an .mp4 video
Chapter 10: Adding Picture Galleries, Video, and Music 357
EMBEDDING A
VIDEO
file. Most browsers can play it, but there are plenty of exceptions, including the
Opera browser and old versions of Internet Explorer. Fortunately, WordPress relies
on the nearly miraculous powers of a JavaScript tool called MediaElement.js (http://

mediaelementjs.com). It rounds out most browser issues by intelligently switching to
other players, like Flash or Silverlight, when a browser can’t play the file you supply.
Thanks to MediaElement.js, the shortcode shown above works reliably on
almost as many computers as the YouTube shortcode (although it won’t work so
nicely on mobile devices, because there’s no slimmed-down, low-bandwidth mobile
version, like the sort that YouTube creates).
You have another option, but it’s impractical unless you’re ready to sacrifice your
social life and spend hours of extra video-encoding time. Obsessive web developers
can resolve format issues by providing fallback video files—multiple copies of the
same movie in different formats. You can then specify a range of formats that the
shortcode can use. Here’s an example that supplies a standard MP4 video
but adds fallback videos for the free WebM codec and for the Flash (.flv) player:

If you find yourself in the difficult position of running into the limitations of YouTube,
but not wanting to face the headaches of do-it-yourself video hosting with the
shortcode, there’s one more option. You can sign up with another video hosting
service—one that may not be free, but will provide more features and control than
YouTube does. The next section has the details.

Advertisements
Showing a Video from Your Media Library

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s