If you want to play a video directly in your posts or pages,  you cannot use the iFrame method because it doesn’t work in WordPress.  iFrame is a way to import existing pages into your own page and it is frequently used by AudioAcrobat and other podcast services.  The only way to make iFrame work in WordPress is by creating an external html page and link to it in WordPress.  But that is not exactly an elegant solution, so let’s forget about iFrame. Fortunately, there are two methods to get a good result of which method 2 has preference:

  1. Using the <code></code> tags for embedding
  2. Download the Flash plugin from Joshua Eldridge

Using code tags for embedding

For embedding(to embed a video or audio in your page), you need to use the <code></code> tags in the html editor (not the visual) to make it work.  The embed method has the advantage that it can be added in any type of website without having to install a plugin and it covers a wide range of formats and audio and many video channels provide the code for you. With embedding you can play MP3, WAV, AIFF, JPG, PNG, MOV and GIF.  Not all browsers support MOV, WAV or AIFF, though.

Here is an example of embedding in WordPress.  It is simply copied and pasted from a YouTube video.
The code looks like a horror, but if you take the time to have a good look, it isn’t all that bad.  Many thinks looks scary the first time you see them :

<code></code>

And below is the result:

You actually can use this code to embed videos from your own domain as well except FLV,  MP4, RM, and ACC as they require a player. But QuickTime (mov) and MP3 are no problem (except on systems without QuickTime installed).  Only the red parts need to be customized, all the rest is used exactly as is.  Have a look here:

<code>http://”strong</code>

Width is simply the width of the video in pixels, same with height.  A pixel is one light-dot on your computer screen. so, width=”425″ means, make this video 425 light-dots wide.

http://www.mydomain.com/myvideo.mov is the path to your video.  If you saved your video into a folder called myvideos and the video is called greatvideo.mov then the path to your video is: http://www.mydomain.com/myvideos/greatvideo.mov
That’s it, no magic tricks needed.

Flash Player plugin

Another method is to install the Flash player plugin from Joshua Eldridge which includes the Flash video player from Jeroen Wijering. With this player, you won’t have the problem of being redirected to YouTube when you click the big arrow in the middle of the video to start it.   Once installed, embedding video becomes very easy.  In the html editor or the visual editor, you type something like this:


where http://www.brightcove.tv/title.jsp?title=1386343200 is the link to a Brightcove video. Thus, if you fill in your own video in this wayhttp://www.mydomain.com/myvideos/greatvideo.mov then it will work like a charm and it doesn’t matter if you type this in the visual- or html editor mode.
The player supports FLV, MOV, MP4, MP3, M4a, WAV, AIFF, AAC, JPG, PNG, MOV,  and GIF.

I use this method in the Art videos category. The player recognizes a wide variety of media, so if you have an audio, the player will handle it correctly.

Disadvantage:
Not all Video network services support this player .  For example, Vimeo videos cannot be imported this way, therefore you need to resort to embedding again in that case.  However, services like Vimeo, Myspace, etc,… provide their own embedding code to copy and paste  into your site.

NOTE: There is a new tutorial with JW Player here: How to Embed Streaming Video & Audio with HTML5 Fallback – using JW Player 5.6

Advertisements