The YouTube Plugin allows you to search YouTube, select a video from the results and add it to your post. You don't need to have a YouTube account. You don't need to edit the b2evolution HTML Validator. You don't even need to go to YouTube.com. It's all done from inside your b2evolution backoffice.

Installation

Requires b2evolution 1.8 or higher

This plugin is installed in the standard way.

1. Download the zip file from the link below.
2. Unzip it and upload the folder to your plugins folder.
3. Go to App Settings > Plugins, and click install next to the YouTube plugin listing.

Usage

Using the plugin is simple.

1. From the write tab, click the "YouTube" button below the textarea. This will cause the YouTube toolbar to appear.
2. Enter your search term and click "Go". You can enter the tags you want to search by or the YouTube username of the person who uploaded the video you want to find (or both).
3. Hover your mouse over the thumbnails that appear to see the title, tags and length. Use the arrows to go to the next page of results.
4. Click on a thumbnail to add a video to your post. It will add something to your post like this: [youtube]vBt3bFboJio[/youtube] . The renderer portion of the plugin will convert this to the code needed to display the video when your blog post is viewed. Use preview if you want to check the video.
5. You can add more than one video if you like. When you're finished adding videos, click on the "X" to hide the YouTube toolbar.

If you know the id of your video and don't want to search for it in the toolbar (or can't find it that way for some reason), you can just add [youtube]THE_ID[/youtube] to your post and the renderer will still work.

Other Sites

Although the video search only supports YouTube, you can use this plugin to display videos from other sites, too. Click on the "Other sites" link to get buttons for adding the clips. Click the button for your service, then paste in the id for the clip. You can usually find the id in the url for the video, or in the embed code that the video site provides.

The supported sites are Blip.tv, Current.tv, Daily Motion, Google Video, iFilm, Jumpcut, Revver, vSocial, metacafe and Break.com

• Metacafe.com works a little differently than the others. Instead of an id for each video, its embed code has to have an id and a filename. The code in your post will look something like this: <code class="codespan">[metacafe]78597/gov_vs_pres_bush.swf[/metacafe]</code>.

• Similarly, Blip.tv is a bit different, you have to paste in the file name rather than an id number. This filename required can be found by going to the Share section of the particular video, and then under the permalinks tab. You will need to use the one with the extension FLV. Something like <code class="codespan">[blip]filename.flv[/blip]</code>

Settings

Thumbnails per page:
Choose the number of results per page you want to display. The default is 3, which should fit on one row for most monitor resolutions. If you run at a higher resolution or want multiple rows, you can raise this number.

Previous releases

The previous releases of the YouTube plugin are hosted in the Plugins Repository at: https://sourceforge.net/projects/evocms-plugins/files/youtube_plugin/

Newer bug fixes are on GitHub: https://github.com/b2evolution/youtube_plugin

Requirements

This plugin requires b2evolution 1.8 or later.

Credits

This plugin was made for b2evoltution by Danny Ferguson

Space Character Fix

Note from Danny: Thanks to Gazugafan who discovered this bug and provided the fix. I've applied it to the plugin and made a new release. I'll leave this section here for a week or two in case anyone has questions about the bug.

I noticed that if you search for a youtube video and include a space character, the search doesn't work at all. I fixed this by doing the following in youtube.js...

line 14 change to (notice the urlencode):

<!-- codeblock lang=javascript line=1 --><pre class="codeblock"><code>var youtube_url_full = youtube_url + '&yttag=' + urlencode(tag) + '&ytpage=' + page;</code></pre><!-- /codeblock -->

after line 28, add a new function as follows:

<!-- codeblock lang=javascript line=1 --><pre class="codeblock"><code>
function urlencode(str) {
str = escape(str);
str = str.replace('+', '%2B');
str = str.replace('%20', '+');
str = str.replace('*', '%2A');
str = str.replace('/', '%2F');
str = str.replace('@', '%40');
return str;
}
</code></pre><!-- /codeblock -->

It's not tested very thoroughly, but it seems to work fine for me. Hope it helps!