BB Code Enhancements - Resisable YouTube bbc

Re-sizable You Tube


THIS WAS AND HAS BEEN TESTED ON MOZILLA FIREFOX AND THE SCREEN SHOTS PROVIDED ARE DIRECTLY FROM MOZILLA FIREFOX.

What this basically does is displays a youtube video, however it allows you to enlarge the video, and go to the video directly.

Title: YouTube Video
BB Code Tag Name: youtube

In Replacement add:

<center><table class="tborder" cellpadding="6" cellspacing="1" border="0" width="400" style="margin:10px 0">
<thead>
	<tr>
		<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={param}" title="View this video at YouTube in a new window or tab" target="_blank">YouTube Video</a>
		</td>
	</tr>
</thead>

<tbody>
	<tr>
		<td class="panelsurround" align="center">
			<object width="425" height="355" type="application/x-shockwave-flash" data="http://www.youtube.com/v/{param}">
				<param name="movie" value="http://www.youtube.com/v/{param}" />
				<param name="wmode" value="transparent" />
				<em><strong>ERROR:</strong> If you can see this, then <a href="http://www.youtube.com/">YouTube</a> is down or you don't have Flash installed.</em>

			</object>
		</td>
	</tr>
</tbody>
</table></center>

Example: [youtube]video id[/youtube]
Description: Place the video id in between the codes and wallah a youtube player

Button Image (Optional): http://i27.tinypic.com/6j28pg.gif


Screenshots

[inciarco]

Interesting Mod, I'll Try It and Tell You How it Works. :up:

Thank You For Sharing It. :up:

[inciarco]

The YouTube Code that You Use has Problems with FireFox as it sends the Error Message; I've tried the Code with the one I use on my Forums and Changed a little the code to include the resizing of the embed Tag and it works Fine on FireFox.

This is the Modified Code:

<table class="tborder" cellpadding="6" cellspacing="1" border="0" width="425" style="margin:10px 0">
<thead>
	<tr>
		<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;

	this.parentNode.parentNode.parentNode.parentNode.getElementsByTagName('embed')[0].width=638;
					this.parentNode.parentNode.parentNode.parentNode.getElementsByTagName('embed')[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;

this.parentNode.parentNode.parentNode.parentNode.getElementsByTagName('embed')[0].width=425;
					this.parentNode.parentNode.parentNode.parentNode.getElementsByTagName('embed')[0].height=355;

				}
			">+</span>
			<a href="http://www.youtube.com/watch?v={param}" title="View this video at YouTube in a new window or tab" target="_blank">YouTube Video</a>
		</td>
	</tr>
</thead>

<tbody>
	<tr>
		<td class="panelsurround" align="center">


<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/{param}"></param><embed src="http://www.youtube.com/v/{param}&autoplay=0&fs=1&rel=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="355" wmode="transparent"></embed></object>


		</td>
	</tr>
</tbody>
</table>

Notice the Followinnf Changed Code:

this.parentNode.parentNode.parentNode.parentNode.getElementsByTagName('embed')[0].width=638;

this.parentNode.parentNode.parentNode.parentNode.getElementsByTagName('embed')[0].height=515;

this.parentNode.parentNode.parentNode.parentNode.getElementsByTagName('embed')[0].width=425;

this.parentNode.parentNode.parentNode.parentNode.getElementsByTagName('embed')[0].height=355;

<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/{param}"></param><embed src="http://www.youtube.com/v/{param}&autoplay=0&fs=1&rel=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="355" wmode="transparent"></embed></object>

My Best Regards.

[ti07shadow]

[quote]The YouTube Code that You Use has Problems with Fire Fox as it sends the Error Message; I've tried the Code with the one I use on my Forums and Changed a little the code to include the resizing of the embed Tag and it works Fine on FireFox.[quote]

There is nothing wrong with the code, the error you may have received is probably because your Firefox browser is probably out of date, the screen shots I have provided are directly from the latest version of Mozilla Firefox. I have tested this on my forums, an a test directory with multiple templates.

It was tested on
On Fire Fox, Internet Explorer and Safari

Question is this your error code?

ERROR: If you can see this, then YouTube is down or you don't have Flash installed.

If you received this error your flash player isn't up to date with youtube

The only reason why I asked is becuase "your modified" version has that error removed. which it was placed there for users to know that their flash player is either not up to date or they dont have flash player, or that youtubes down.

[inciarco]

Ok, perhaps I haven't Updated a Addon.

But is Curious, because with the Embed Code that I Provided the YouTube Video Works Ok. I Posted it to Offer Admins other Option to Embed YouTube Videos in their BB Codes.

Idea: Do you know how can be offered the user the possibility to Write a Size (Width and Height)? I'd be Fun to Add that Option Too.

I can see that the Key Code is:

			<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;

	this.parentNode.parentNode.parentNode.parentNode.getElementsByTagName('embed')[0].width=638;
					this.parentNode.parentNode.parentNode.parentNode.getElementsByTagName('embed')[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;

this.parentNode.parentNode.parentNode.parentNode.getElementsByTagName('embed')[0].width=425;
					this.parentNode.parentNode.parentNode.parentNode.getElementsByTagName('embed')[0].height=355;

				}
			">+</span>

And of course to Use the wrapping object Code:

<object width="520" height="420"></object>

With that and the Table Structure Proposed by You (very nice design), this can be used with other BB Codes.

[ti07shadow]

you could work out a code where the user in {option} puts w|h, but I believe this will require java scripting to convert the [youtube=320|240]video id[/youtube] o be like youtube=width | height ]

the problem though is you would have to work out the file justly because of server side crap could be injected if not protected already. I would just modify those sections to the way you want the 2 sizes.

later on ill look at addign a High Quality thing to.

[inciarco]

I mean to place 2 Text Boxes Fields Next to the [+] and when you press the [+] that the Code reads the Numbers on the 2 Text Boxes, and if the Number is Different than 0 and Bigger than certain Value (width=638 and height=515 in your code), then take those Numbers and use them to increase the size of the Object; if a Text Field is Empty then Use the Default Value (width=638 and height=515 in your code).

And of course that the Use of the Code of the Boxes don't cause any SQL Injection Problem as you mention.

It'd be Nice to Offer that Extra Option.

My Best Regards.

[ti07shadow]

wast talking about sql injections, server side basically can be used to accesing certain files and/or changing fields, however probably wouldn't even be a problem.

[danyxx]

Is don`t work for me
I add that code in Replacement Variable Manager but he make my theme ugly ...
Where i must add that code ?

[Andyrew]

Originally Posted by danyxx

Is don`t work for me
I add that code in Replacement Variable Manager but he make my theme ugly ...
Where i must add that code ?

Custom BBcode/ add new BBcode