Q: How do I embed video on my website?
A: The answer to this question depends on who owns the video and where it is hosted. If it’s a video you’ve created, and you want to host it on your site, then you’ll want to convert the video file (whether it’s an .mov, .avi, or other format) to flash (.flv) and use a flash player plugin (see below) to embed the video on your blog post or page.
The Adobe Flash Video Encoder (or Adobe Media Encoder) can convert a variety of file formats to flv (Flash Video). MPEG Streamclip is a very powerful video converter program with options for resizing the video, sampling sound, etc. and exporting as flv.
Be sure to resize the video to the size you’ll display it online and use the appropriate video codec (H.264 or On2 VP6). See http://www.adobe.com/devnet/flash/quickstart/video_encoder/ for some useful information about Flash and video encoding even if you’re not using the Adobe Media Encoder.
1. Hana Flv Player (with HTML5 support)
This flash player has elegant, simple skins and many options for how to use them. A “short code” can be used to quickly insert the video into a post or page. Be sure to read the readme file that comes with the plugin and visit the plugin website for more configuration options. It has options for HTML5, but you must encode your video properly in h.264 (and give it mp4 extension).
Download here: http://wordpress.org/extend/plugins/hana-flv-player/
I used the minimal version of the Hana Flv player at AdvertusMedia.com. It works great framed in the div on top of a background image of a television:
2. Video Embed Thumbnail Generator
This plugin makes embedding videos, generating thumbnails, and encoding HTML5-compliant files a little bit easier by adding several fields to any video uploaded to the WordPress Media Library. The shortcode will embed a flexible, responsive HTML5 video player with Flash fallback for unsupported browsers, and a preview image.
Download here: http://wordpress.org/plugins/video-embed-thumbnail-generator/
3. WordPress Built-In oEmbed
Starting with WordPress 2.9, you can embed videos, images, and other content into your WordPress site by simply copying the URL of the item into your content area. Make sure that the URL is on its own line and not hyperlinked, and WordPress will automatically turn the YouTube link into an embedded video.
Check out this cool video: That was a cool video.
No Flash! Hosted videos only please – at least for my clients. Flash – and YouTube still uses flash – won’t play on the page in iOS. HTML5 video!
With the new oEmbed features of the latest WordPress, you can simply paste the URL of the YouTube video into a WordPress post or page, and it will be encoded correctly for the device. And, yes, they do work on iOS devices. I need to update this post and get rid of all these old Flash players. Thanks for the comment! I’ll update the content soon. Here’s more information on oEmbed:
Hi Gary! That’s an excellent question. If they are Vimeo, Vimeo provides a widget that allows you to display all the videos in this thumbnail rollover format: http://vimeo.com/widget. I am also using a pretty cool plugin on a client’s site that allows you to choose several videos and it randomly displays them in the sidebar: http://wordpress.org/extend/plugins/video-sidebar-widgets/
A couple others worth checking out:
I use VidEmbed for standalone video on pages and sidebar:
Angela, thanks! Very helpful as usual. The one you mentioned – Video Sidebar Widget – that displays random vids, evidently it doesn’t work too good if you have a caching plugin on your site; well at least that’s the warning given by the author. The VidEmbed looks to be the go for me. Ta.
Can you recommend a plugin for my sidebar which can be configured to either: a) display the most recent videos I have embedded in my recent posts, or b) display videos I nominate? I use a WordPress blog and I’d use YouTube and Vimeo vids. Thanks 🙂