Video Embed & Thumbnail Generator WordPress Plugin

In a future update (v4.7) this plugin will be changing its name to “Videopack” and removing old video players StrobeMediaPlayback and JW Player 6 that haven’t been supported for several years. Freemius will also be integrated on an opt-in basis to allow premium add-ons. More info in the support forum.

A plugin for the WordPress visual editor to make embedding videos, generating thumbnails, and encoding HTML5-compliant files a little bit easier.

Download from 

Installation

1. Upload the entire video-embed-thumbnail-generator folder to the /wp-content/plugins/ directory.
2. Activate the plugin through the ‘Plugins’ menu in WordPress.
3. Make sure you have all your MIME types configured correctly. Many servers don’t have .mp4, .m4v, .ogv configured, and even more don’t have .webm. There are a number of ways to do this. In your public_html directory you can edit your .htaccess file and add the following lines:

   AddType video/ogg .ogv
   AddType video/mp4 .mp4
   AddType video/mp4 .m4v
   AddType video/webm .webm

   Optional:

   AddType video/mp4 .mov

   will help with IE playback of .mov files but could interfere with other QuickTime players.
   Or use your web host’s configuration panel (cpanel, etc) to add custom MIME types.

Just click the Add Media button to get started:

This plugin adds several fields to any video uploaded to the WordPress Media Library. Just choose a few options, make thumbnails, 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.

Sample video:

[showshortcode]

			

				
			
			
2,068 views
			

								
				
 
					
				SDRR - Date My Daughter

		
[/showshortcode]

Sample gallery:

[showshortcode]
Meanwhile Excerpt
			
Bronx Warrants Excerpt
			
Love Sick Love Excerpt
			
Inside Out Excerpt
			
Cheech and Chong — Lets Make a Dope Deal
			
Marriage Ref - Frozen Tundra Promo
			
[/showshortcode]

You have the option to use a few different video players:

• Video.js (files are included with the plugin)
• The WordPress default player using MediaElement.js, which was introduced in WordPress version 3.6
• JW Player 6 (if their old, discontinued plugin is already installed. This plugin does not work with JW Player 7 yet.)
• Adobe’s Strobe Media Playback Flash player (deprecated)

The Strobe Media Playback option hasn’t been updated since 2011 and is not recommended, but I’m keeping it around for longtime users of this plugin who don’t want to change. Most features of the plugin will work when using Strobe Media Playback, but new features will not be tested with it. Selecting Strobe Media Playback 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 responsively resize to fit the container it’s in. There is no need to use FitVids.js and in fact FitVids.js will break playback for some players. If you provide multiple H.264 resolutions, the plugin can automatically select the one closest to the size of the player or a resolution of your choice, and provide a button for users to select the resolution manually. If you have Google Analytics set up on your site, the plugin will automatically send Google Analytics Events when users start, reach 25%, 50%, 75%, and complete watching your videos.

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 [showshortcode]

[/showshortcode] 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.

Once you've filled in all your options, click "Insert into Post" and you'll get a shortcode in the visual editor like this

To embed videos on other sites you can use an iframe like this

<iframe src='https://www.kylegilman.net/?attachment_id=2897&kgvid_video_embed[enable]=true' frameborder='0' scrolling='no' width='640' height='360'></iframe>

If you enable oEmbed provider data in the plugin settings, the URL of a post with a video shortcode in it or the URL of the video's attachment page will be converted to an embedded video on sites that allow oEmbed discovery. For example [code]https://www.kylegilman.net/2011/01/18/video-embed-thumbnail-generator-wordpress-plugin/[/code] is the URL for this plugin on my website, but it has the oEmbed header for the video embedded in it so the URL will be converted to an embedded video on sites with oEmbed discovery enabled. WordPress limits oEmbed providers to an internal whitelist for security reasons. This plugin has an option to enable oEmbed discovery for users with the unfiltered_html capability.

The JW Player 6 plugin has been removed from the WordPress plugin repository and JW Player 7 uses a very different system for embedding videos. JW Player 7 support is not available in this plugin yet. The Strobe Media Playback option hasn't been updated since 2011 and is not recommended, but I'm keeping it around for longtime users of this plugin who don't want to change. Most features of the plugin will work when using Strobe Media Playback, but new features will not be tested with it. Selecting Strobe Media Playback 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.

If you want to further modify the way the video player works, you can add the following options inside the KGVID tag. These will override anything you've set in the plugin settings

• [code]id="xxx"[/code] video attachment ID (instead of using a URL).
• [code]videos="x"[/code] number of attached videos to display if no URL or id is given.
• [code]orderby="menu_order/title/post_date/rand/ID"[/code] criteria for sorting attached videos if no URL or ID is given.
• [code]order="ASC/DESC"[/code] sort order.
• [code]poster="http://www.example.com/image.jpg"[/code] sets the thumbnail.
• [code]endofvideooverlay="http://www.example.com/end_image.jpg"[/code] sets the image shown when the video ends.
• [code]width="xxx"[/code]
• [code]height="xxx"[/code]
• [code]align="left/right/center"[/code]
• [code]inline="true/false"[/code] allow other content on the same line as the video
• [code]volume="0.x"[/code] pre-sets the volume for unusually loud videos. Value between 0 and 1.
• [code]mute="true/false"[/code] sets the mute button on or off.
• [code]controlbar="docked/floating/none"[/code] sets the controlbar position. Video.js only responds to the "none" option.
• [code]loop="true/false"[/code]
• [code]autoplay="true/false"[/code]
• [code]pauseothervideos="true/false"[/code] video will pause other videos on the page when it starts playing.
• [code]start="mm:ss"[/code] video will start playing at this timecode.
• [code]watermark="http://www.example.com/image.png"[/code] or [code]"false"[/code] to disable.
• [code]watermark_link_to=home/parent/attachment/download/false"[/code]
• [code]watermark_url="http://www.example.com/"[/code] or [code]"false"[/code] to disable. If this is set, it will override the [code]watermark_link_to[/code] setting.
• [code]title="Video Title"[/code] or [code]"false" [/code]to disable.
• [code]embedcode="html code"[/code] changes text displayed in the embed code overlay in order to provide a custom method for embedding a video or "false" to disable.
• [code]view_count="true/false"[/code] turns the view count on or off.
• [code]caption="Caption"[/code]
• [code]description="Description"[/code] Used for metadata only.
• [code]downloadlink="true/false"[/code] generates a link below the video to make it easier for users to save the video file to their computers.
• [code]right_click="true/false"[/code] allow or disable right-clicking on the video player.
• [code]resize="true/false"[/code] allow or disable responsive resizing.
• [code]auto_res="automatic/highest/lowest"[/code] let the plugin select the best resolution for the size of the player.
• [code]pixel_ratio="true/false"[/code] account for high-density (retina) displays when choosing automatic video resolution.
• [code]schema="true/false"[/code] allow or disable Schema.org search engine metadata.

These options will add a subtitle/caption track

• [code]track_src="https://www.example.com/subtitles.vtt_.txt"[/code] URL of the WebVTT file.
• [code]track_kind=subtitles/captions/chapters[/code]
• [code]track_srclang=xx[/code] the track's two-character language code (en, fr, es, etc)
• [code]track_label="Track Label"[/code] text that will be shown to the user when selecting the track.
• [code]track_default="true/false"[/code] track is enabled by default.

These options will only affect Video.js playback

• [code]skin="example-css-class"[/code] Completely change the look of the video player. Instructions here.
• [code]nativecontrolsfortouch="true/false[/code] disable Video.js styling and show the built-in video controls on mobile devices. This will disable the resolution selection button.

These options will only affect Flash playback in Strobe Media Playback video elements. They will have no effect on HTML5 or Video.js playback.

• [code]autohide="true/false"[/code] specify whether to autohide the control bar after a few seconds.
• [code]playbutton="true/false"[/code] turns the big play button overlay in the middle of the video on or off.
• [code]streamtype="live/recorded/DVR"[/code] I honestly don't know what this is for.
• [code]scalemode="letterbox/none/stretch/zoom"[/code] If the video display size isn't the same as the video file, this determines how the video will be scaled.
• [code]backgroundcolor="#rrggbb"[/code] set the background color to whatever hex code you want.
• [code]configuration="http://www.example.com/config.xml"[/code] Lets you specify all these flashvars in an XML file.
• [code]skin="http://www.example.com/skin.xml"[/code] Completely change the look of the video player. Instructions here.

These options are available for video galleries (options work the same as standard WordPress image galleries)

• [code]gallery_thumb="xxx"[/code] width in pixels to display gallery thumbnails.
• [code]gallery_exclude="15"[/code] comma separated video attachment IDs. Excludes the videos from the gallery.
• [code]gallery_include="65"[/code] comma separated video attachment IDs. Includes only these videos in the gallery. Please note that include and exclude cannot be used together.
• [code]gallery_orderby="menu_order/title/post_date/rand/ID"[/code] criteria for sorting the gallery.
• [code]gallery_order="ASC/DESC"[/code] sort order.
• [code]gallery_id="241"[/code] post ID to display a gallery made up of videos associated with a different post.
• [code]gallery_end="close/next"[/code] either close the pop-up or start playing the next video when the current video finishes playing.
• [code]gallery_per_page="xx"[/code] or[code]"false"[/code] to disable pagination. Number of video thumbnails to show on each gallery page.
• [code]gallery_title="true/false"[/code] display the title overlay on gallery thumbnails.

For example

[showshortcode]

			

				
			
			
707 views
			

								
				
 
					
				Kyle Gilman Editor Reel

		

[/showshortcode]

These options can be added to the URL to further customize playback

Using the `kgvid_video_embed` query string any of the following options will modify playback: auto_res, autoplay, default_res, fullwidth, height, mute, nativecontrolsfortouch, pixel_ratio, resize, set_volume, start, width

Example: [code]https://www.kylegilman.net/portfolio-item/bronx-warrants-pilot/?kgvid_video_embed[start]=29&kgvid_video_embed[autoplay]=true[/code] autoplays the embedded video and starts 29 seconds in.

Translations included:

• Español por Andrew Kurtis de WebHostingHub.
• Français par F.R. 'Friss' Ferry, friss.designs@gmail.com
• Българска от Емил Георгиев, svinqvmraka@gmail.com

Developing on

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 or my WordPress support forum. I do not offer free email support.

Why doesn't my video play?

Most of the time your video doesn't play because it's not encoded in the right format. Videos have containers like mp4, mov, ogv, mkv, flv, etc and within those containers there are video and audio codecs like H.264, MPEG-4, VP8, etc. The best option for this plugin is an mp4 container with H.264 video and AAC audio. It's confusing, but there is a codec usually identified simply as "MPEG-4" of "MPEG-4 Visual" which is not the same thing as H.264 even if it's in an mp4 container. mp4s with MPEG-4 video will not play in most browsers, and if you don't use AAC audio you won't get any audio. I highly recommend using Handbrake to make a file with H.264 video and AAC audio in an MP4 container.

Use MediaInfo to get really detailed information about your media files.

If your theme loads FitVids.js, it will break playback in Firefox. If you can figure out how to prevent your theme from loading FitVids.js you will not miss it.

Why does my video have to download completely before it starts playing?

mp4/m4v/mov files have something called a moov atom that gives the video player information about the content of the video (dimensions, duration, codecs, etc). Depending on the program you used to make your video, the moov atom can be at the beginning or the end of the file. Most video players will wait until they find the moov atom before starting playback. Otherwise it doesn't know how to display the information it's downloading. If it's at the beginning of the file, playback starts very soon after the user hits the play button. If it's at the end of the file, the whole video has to download before playback starts.

There are a number of ways to fix this problem. Most video encoding programs have an option like "Web optimized," "Streaming," "Fast start," or "Progressive download." Try to find and enable that option in your program. If you can't do that, there are programs designed to move the moov atom to the head of the file. Try QTIndexSwapperfor Adobe Air (cross platform), MP4 Faststart for Windows, or QTFastStart for Mac.

FFMPEG puts the moov atom at the end of the file, so this can be a problem. The plugin will fix this problem on newly encoded H.264 videos if you have a recent version of FFMPEG and enable the "movflags faststart" option in the plugin settings or if you have qt-faststart or MP4Box installed on your server.

Why doesn't this work with YouTube?

WordPress already has a built-in system for embedding videos from YouTube, Vimeo, Dailymotion, etc. Just put the URL into your post and WordPress will automatically convert it to an embedded video using oEmbed. You don't need this plugin to do that. If you're trying to generate new thumbnails from YouTube videos, I'm not going to risk Google's wrath by providing that functionality. I'm not even sure I could figure out how to do it anyway.

If you just want to change the skin or thumbnail of a YouTube video, use JW Player.

I'm getting an error message "FFMPEG not found at /usr/local/bin/. You can embed existing videos, but video thumbnail generation and Mobile/HTML5 video encoding is not possible without FFMPEG."

First off, don't panic.

This plugin can use FFMPEG or LIBAV to make thumbnails and create alternate video formats. Unfortunately most servers don't have FFMPEG installed and most shared hosting plans don't allow you to install FFMPEG because of the system resources it requires. You're getting this error message because you don't have FFMPEG installed in the most common directory. If you know you have FFMPEG installed on your server, you'll need to find the actual path to the program and enter it in the plugin settings field Path to applications on server

Most of the features of the plugin will work without FFMPEG. You can generate embed shortcodes for your videos and make thumbnails on any host because that part of the plugin is JavaScript running in your browser. But without FFMPEG you won't be able to automatically generate thumbnails or encode alternate formats on the server. If you don't have your own VPS or dedicated server, Dreamhost is one of the few shared hosts I know of that has FFMPEG installed and available for users.

How can I encode videos in directories protected by .htaccess passwords?

Enter the username & password in the plugin settings "FFMPEG Settings" tab, or use the "Embed from URL" tab and enter the URL in this format http://username:password@yourdomain.com/uploads/2012/01/awesomevid.mp4 in the Video URL field.