Generates thumbnails, encodes HTML5-compliant videos, and embeds locally hosted videos. Requires FFMPEG or LIBAV for encoding.
The plugin adds several fields to any video uploaded to the WordPress Media Library. Just choose a few options and click "Insert into Post" and you'll get a shortcode in the post editor that will embed a flexible, responsive HTML5 video player with Flash fallback for unsupported browsers, and a preview image.
You have the option to use either the lightweight, flexible Video.js HTML5 player, the WordPress default player (introduced in WordPress version 3.6), or Adobe's Strobe Media Playback Flash player. The Video.js player is styled the same in all desktop browsers and is easily customizable. The Strobe Media Playback option is not recommended. It will default to a Flash video player if you're using a Flash-compatible file (flv, f4v, mp4, mov, or m4v). Otherwise it will use the Video.js player as a fallback. No matter which player you use, the video will resize on the fly to fit the container it's in.
You can also use the plugin to create a popup video gallery. The shortcode uses options similar to the WordPress image gallery shortcode. In its simplest form use the code
[KGVID gallery="true"] to create a gallery of all videos attached to the post. Thumbnail size and video popup size can be set on the plugin settings page or in the shortcode using the options listed below.
If your video can be played natively in your browser, or if you have FFMPEG or LIBAV installed on your server, you can generate thumbnails from your video. Using either the "Generate" or "Randomize" buttons will create an array to choose from. The "Generate" button will always generate thumbnails from the same frames of your video, evenly spaced. If you don't like them, you can randomize the results with the "Randomize" button. If you want to see the first frame of the video, check the "Force 1st Frame Thumbnail" button. After creating an array of thumbnails you can save them all using the "Save all thumbnails" button.
If you know which frame you want to use, click "Choose from video..." to select it from the video. This will only work for videos that can be played natively in your browser. If you want really fine control you can enter timecode in the "Thumbnail timecode" field. Use
mm:ss format. You can use decimals to approximate frames. For example,
23.5 will generate a thumbnail halfway between the 23rd and 24th seconds in the video.
02:23.25 would be one quarter of the way between the 143rd and 144th seconds. You can generate as many or as few as you need (up to 99 at a time).
After you select a thumbnail it will be registered in the WordPress Media Library and added to the video's attachments. Unused thumbnails will be deleted.
In the plugin settings you can set the default maximum width and height based on the dimensions of your particular template and those values will be filled in when you open the window. If you generate thumbnails, the video display dimensions will be adjusted automatically to match the size and aspect ratio of the video file. You can make further adjustments if you want.
I highly recommend starting with H.264 video and AAC audio in an MP4 container. If you're encoding with Handbrake, make sure that "Web Optimized" is checked. Using Apple's Compressor, the "Streaming" setting should be "Fast Start" (not Fast Start - Compressed Header). I've written up my recommended video encode settings in a post on my website.
The plugin can use FFMPEG or LIBAV to encode videos and make thumbnails if you have them installed on your server. By default the plugin looks for FFMPEG in
/usr/local/bin but if the application is installed in a different place on your server, you can point it to the correct place in the plugin settings. Users running WordPress on Windows servers should try using Linux-style paths (with forward slashes instead of backslashes and a forward slash
/ instead of
If you have the proper libraries installed, you can choose to replace your uploaded video with an H.264 file of the same resolution, and generate as many as five additional formats depending on your original source. 1080p, 720p, or up to 480p H.264, WEBM, and OGV. Different browsers have different playback capabilities. Most desktop browsers can play H.264, and all modern mobile devices can play at least 480p H.264. If you create multiple H.264 resolutions, the highest resolution supported by the device will be served up automatically. The plugin will not upconvert your video, so if you upload a 720p video, it will not waste your time creating a 1080p version. There was a time when it seemed like a good idea to provide OGV or WEBM for some desktop browsers, but Firefox supports H.264 playback in Windows now and will soon support it in Mac & Linux. I no longer recommend encoding OGV or WEBM unless you expect a large number of no-Flash sticklers visiting your site. However, your mileage may vary.
The files will encode in the background and will take several minutes to complete, depending on your server setup and the length and size of your video. The plugin adds a Video Encode Queue menu to the Tools menu. You will see encoding progress, the option to cancel an encoding job, and you should get an error message if something goes wrong. Users on Windows servers may get inconsistent results with the encoding queue.
Encoded H.264 files can be fixed for streaming using "movflags faststart" introduced in recent versions of FFMPEG/LIBAV, or qt-faststart or MP4Box if you have one of them installed in the same directory as your encoder and select it in the plugin settings. Without one of these options enabled, FFMPEG/LIBAV will place moov atoms at the end of H.264 encoded files, which forces the entire file to download before playback can start and prevents the Strobe Media player from playing them at all.
If you want to make ogv, webm, or H.264 files available and can't use the FFMPEG encode button, you can upload your own files to the same directory as the original and the plugin will automatically find them. For example, if your main file is awesomevid.mp4, the plugin will look for awesomevid-1080.mp4, awesomevid-720.mp4, awesomevid-480.mp4 (up to 480p H.264), awesomevid.webm and awesomevid.ogv as well. No matter what format your original video is, you can use it in the shortcode and the plugin will attempt to find all compatible formats related to it. For example, you might have an AVI called awesomevid.avi which is not compatible with any browser, but if you have other formats encoded already, [KGVID]http://yoursite.com/awesomevid.avi[/KGVID] will ignore the incompatible AVI file, but find those other formats and embed them.
If you want to make it easier for users to save your videos to their computers, you can choose to include a link by checking the "Generate Download Link Below Video" button.
Sometimes for various reasons you might need to embed video files that are not saved in the WordPress Media Library. Maybe your file is too large to upload through the media upload form (if it is, I suggest the excellent "Add From Server" plugin), or maybe it's hosted on another server. Either way, you can use the tab "Embed Video From URL" in the Add Media window. Just enter the Video URL manually, and all other steps are the same as the Media Library options. The plugin will look for alternate encoded files in the same directory as the original, but this takes a long time when the video is on another server so it will only check for them once.
To embed videos on other sites you can use code like this.
<iframe src='http://www.kylegilman.net/?attachment_id=2897&kgvid_video_embed[enable]=true' frameborder='0' scrolling='no' width='640' height='360'></iframe>
[KGVID poster="http://www.kylegilman.net/wp-content/uploads/2011/10/Reel-11-10-10-web_thumb2.jpg" width="720" height="404"]http://www.kylegilman.net/wp-content/uploads/2006/09/Reel-2012-05-15-720.mp4[/KGVID]
id="xxx"video attachment ID (instead of using a URL).
videos="x"number of attached videos to display if no URL or id is given.
poster="http://www.example.com/image.jpg"sets the thumbnail.
endofvideooverlay="http://www.example.com/end_image.jpgsets the image shown when the video ends.
inline="true/false"allow other content on the same line as the video
volume="0.x"pre-sets the volume for unusually loud videos. Value between 0 and 1.
controlbar="docked/floating/none"sets the controlbar position. Video.js only responds to the "none" option.
embedcode="html code"changes text displayed in the embed code overlay in order to provide a custom method for embedding a video or
view_count="true/false"turns the view count on or off.
description="Description"Used for metadata only.
downloadlink="true/false"generates a link below the video to make it easier for users to save the video file to their computers.
right_click="true/false"allow or disable right-clicking on the video player.
resize="true/false"allow or disable responsive resizing.
skin="example-css-class"Completely change the look of the video player. Instructions here.
autohide="true/false"specify whether to autohide the control bar after a few seconds.
playbutton="true/false"turns the big play button overlay in the middle of the video on or off.
streamtype="live/recorded/DVR"I honestly don't know what this is for.
scalemode="letterbox/none/stretch/zoom"If the video display size isn't the same as the video file, this determines how the video will be scaled.
backgroundcolor="#rrggbb"set the background color to whatever hex code you want.
configuration="http://www.example.com/config.xml"Lets you specify all these flashvars in an XML file.
skin="http://www.example.com/skin.xml"Completely change the look of the video player. Instructions here.
gallery="true"turns on the gallery
gallery_thumb="xxx"width in pixels to display gallery thumbnails
gallery_exclude="15"comma separated video attachment IDs. Excludes the videos from the gallery.
gallery_include="65"comma separated video attachment IDs. Includes only these videos in the gallery. Please note that include and exclude cannot be used together.
gallery_orderby="menu_order/title/post_date/rand/ID"criteria for sorting the gallery
gallery_id="241"post ID to display a gallery made up of videos associated with a different post
I'm not really a software developer. I'm just a film editor with some time on his hands who wanted to post video for clients and wasn't happy with the current state of any available software. But I want to really make this thing work, so please help me out by posting your feedback on Github.
Requires: 3.5 or higher
Compatible up to: 3.8.1
Last Updated: 2013-11-15
4 of 9 support threads in the last two months have been resolved.
Got something to say? Need help?