BB Code Enhancements - Embed XHTML valid YouTube and Google Video into your posts

==============================
DON'T FORGET TO CLICK INSTALL!
==============================

Just thought I'd share what I did to allow my users to embed YouTube and Google Video videos into posts on my forum. This is my very first mod I've made since switching to vB, so forgive me if I screwed something up.


Demo:

http://forums.finalgear.com/test-for...-thread-14892/

The black bar will be different for you as it'll match your theme (it uses the same style as the whole quick reply box).


Upgrading from v1.x:

Just remove the plugin you added before (manage plugins -> delete) and then continue on to the installation instructions.

If you already have v2.x installed, you do NOT need to do this.


Installation:

Download and install the attached product. It will automatically create the new custom BBCode and add in some filtering plugins.

Save the two attached images and upload them to /images/editor/.


Usage:

Here's some examples:

[youtube]http://www.youtube.com/watch?v=hl2UUunlI2Q[/youtube]
[youtube]hl2UUunlI2Q[/youtube]
[youtube="http://www.youtube.com/watch?v=hl2UUunlI2Q"]Aston Martin Crash[/youtube]
[youtube="hl2UUunlI2Q"]Aston Martin Crash[/youtube]

[gvideo]http://video.google.com/videoplay?docid=3688185030664621355[/gvideo]
[gvideo]3688185030664621355[/gvideo]
[gvideo="http://video.google.com/videoplay?docid=3688185030664621355"]1980's Izuzu Gemini Advertisement[/gvideo]
[gvideo="3688185030664621355"]1980's Izuzu Gemini Advertisement[/gvideo]

Using vBAdvanced? It lacks the hook this plugin uses apparently, so if you wish to use this plugin with it, you need to use only the video ID and NOT the full URL for it to display correctly. Nothing I can do about it, it's vBAdvanced's fault.


How do I customize the look of the new box thingies?

Just edit the new custom BBCode items. It's in the admin area, near the bottom.

[Daracon]

updated and works great! thank you!

[PoetJA-1975]

Originally Posted by Viper007Bond

v2.2.0 Released

I got tired of watching tiny little videos on my forums, so I added a +/- button for increasing the video size to 150% of normal. Should make it easier to watch some videos.

In action: http://forums.finalgear.com/showthread.php?t=14892

Thanx - but I've customized the bbcode to fit the style of my forum: (example).
Is there anyway - you can post what part of the html is changed to include the +/- button?

Jacquii.

[Viper007Bond]

Originally Posted by wizardan

Simple overwrite for the upgrade, then?

Yes, import product, tick the overwrite button. It'll upgrade the existing custom BBCode.

Originally Posted by BobbyBig

Updated but we dont see the + / - sign, whats wrong ?

Make sure you ticked the "overwrite" button.

[Viper007Bond]

Originally Posted by PoetJA-1975

Thanx - but I've customized the bbcode to fit the style of my forum: (example).
Is there anyway - you can post what part of the html is changed to include the +/- button?

Jacquii.

YouTube:

<td class="tcat" colspan="2" style="text-align:center">
	<span style="float:right;margin-left:5px;cursor:pointer;font-weight:bolder;" title="Increase this video's size" onclick="
		if ( this.innerHTML == '+' ) {
			this.innerHTML = '-';
			this.title = 'Reset video size';
			this.parentNode.parentNode.parentNode.parentNode.width=638;
			this.parentNode.parentNode.parentNode.parentNode.getElementsByTagName('object')[0].width=638;
			this.parentNode.parentNode.parentNode.parentNode.getElementsByTagName('object')[0].height=515;
		} else {
			this.innerHTML = '+';
			this.title = 'Increase this video\'s size';
			this.parentNode.parentNode.parentNode.parentNode.width=425;
			this.parentNode.parentNode.parentNode.parentNode.getElementsByTagName('object')[0].width=425;
			this.parentNode.parentNode.parentNode.parentNode.getElementsByTagName('object')[0].height=355;
		}
	">+</span>
	<a href="http://www.youtube.com/watch?v=...

Google Video:

<td class="tcat" colspan="2" style="text-align:center">
	<span style="float:right;margin-left:5px;cursor:pointer;font-weight:bolder;" title="Increase this video's size" onclick="
		if ( this.innerHTML == '+' ) {
			this.innerHTML = '-';
			this.title = 'Reset video size';
			this.parentNode.parentNode.parentNode.parentNode.width=600;
			this.parentNode.parentNode.parentNode.parentNode.getElementsByTagName('object')[0].width=600;
			this.parentNode.parentNode.parentNode.parentNode.getElementsByTagName('object')[0].height=489;
		} else {
			this.innerHTML = '+';
			this.title = 'Increase this video\'s size';
			this.parentNode.parentNode.parentNode.parentNode.width=400;
			this.parentNode.parentNode.parentNode.parentNode.getElementsByTagName('object')[0].width=400;
			this.parentNode.parentNode.parentNode.parentNode.getElementsByTagName('object')[0].height=326;
		}
	">+</span>
	<a href="http://video.google.com/videoplay?docid=

[PoetJA-1975]

EXCELLENT = Thanx so much VIPER - works like a charm.
I just realized I haven't rated this thread - So gave it an excellent rating
And a vote for MOTM!

Jacquii.

[funkmeister]

How do I get the videos to display centered in each post vs. left aligned - I've gone through and added align="center" in what I thought were the obvious places, but it's not sticking - any help appreciated.

Great job on this update by the way, works great. Thanks.

[PoetJA-1975]

Originally Posted by funkmeister

How do I get the videos to display centered in each post vs. left aligned - I've gone through and added align="center" in what I thought were the obvious places, but it's not sticking - any help appreciated.

Great job on this update by the way, works great. Thanks.

I simply added <div align="center"> at the very top of the code....
Then just close by putting </div> at the very bottom

HTH,

Jacquii.

[funkmeister]

Originally Posted by PoetJA-1975

I simply added <div align="center"> at the very top of the code....
Then just close by putting </div> at the very bottom

HTH,

Jacquii.

Yeah, that is what I've done, but perhaps it's in the wrong place? I have:

$vbulletin->db->escape_string('<div align="center"><table class="tborder" cellpadding="6" cellspacing="1" border="0" width="400" align="center" style="margin:10px 0">

With a </div> at the very bottom.

Is this the right place?

[PoetJA-1975]

That's horribly wrong

Jacquii.

[Viper007Bond]

Originally Posted by funkmeister

Is this the right place?

No. Install the product. When it gets installed, it automatically adds in some custom BBCode.

Then just go into your admin area -> Custom BBCode -> edit the new different BBCodes.