View Full Version : BB Code Enhancements - Resisable YouTube bbc
ti07shadow
02-18-2009, 10:00 PM
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.w idth=638;
this.parentNode.parentNode.parentNode.parentNode.g etElementsByTagName('object')[0].width=638;
this.parentNode.parentNode.parentNode.parentNode.g etElementsByTagName('object')[0].height=515;
} else {
this.innerHTML = '+';
this.title = 'Increase this video\'s size';
this.parentNode.parentNode.parentNode.parentNode.w idth=425;
this.parentNode.parentNode.parentNode.parentNode.g etElementsByTagName('object')[0].width=425;
this.parentNode.parentNode.parentNode.parentNode.g etElementsByTagName('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: video id
Description: Place the video id in between the codes and wallah a youtube player
Button Image (Optional): http://i27.tinypic.com/6j28pg.gif
Screenshots
https://vborg.vbsupport.ru/external/2009/02/51.png
https://vborg.vbsupport.ru/external/2009/02/52.png (http://i40.tinypic.com/x5s9qe.png) https://vborg.vbsupport.ru/external/2009/02/53.png (http://i42.tinypic.com/30krern.png)
inciarco
02-19-2009, 09:20 PM
Interesting Mod, I'll Try It and Tell You How it Works. :up:
Thank You For Sharing It. :up:
:)
inciarco
02-19-2009, 11:13 PM
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.w idth=638;
this.parentNode.parentNode.parentNode.parentNode.g etElementsByTagName('object')[0].width=638;
this.parentNode.parentNode.parentNode.parentNode.g etElementsByTagName('object')[0].height=515;
this.parentNode.parentNode.parentNode.parentNode.g etElementsByTagName('embed')[0].width=638;
this.parentNode.parentNode.parentNode.parentNode.g etElementsByTagName('embed')[0].height=515;
} else {
this.innerHTML = '+';
this.title = 'Increase this video\'s size';
this.parentNode.parentNode.parentNode.parentNode.w idth=425;
this.parentNode.parentNode.parentNode.parentNode.g etElementsByTagName('object')[0].width=425;
this.parentNode.parentNode.parentNode.parentNode.g etElementsByTagName('object')[0].height=355;
this.parentNode.parentNode.parentNode.parentNode.g etElementsByTagName('embed')[0].width=425;
this.parentNode.parentNode.parentNode.parentNode.g etElementsByTagName('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.g etElementsByTagName('embed')[0].width=638;
this.parentNode.parentNode.parentNode.parentNode.g etElementsByTagName('embed')[0].height=515;
this.parentNode.parentNode.parentNode.parentNode.g etElementsByTagName('embed')[0].width=425;
this.parentNode.parentNode.parentNode.parentNode.g etElementsByTagName('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
02-20-2009, 12:03 AM
[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
02-20-2009, 12:18 AM
Ok, perhaps I haven't Updated a Addon. :p
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)? :confused: 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.w idth=638;
this.parentNode.parentNode.parentNode.parentNode.g etElementsByTagName('object')[0].width=638;
this.parentNode.parentNode.parentNode.parentNode.g etElementsByTagName('object')[0].height=515;
this.parentNode.parentNode.parentNode.parentNode.g etElementsByTagName('embed')[0].width=638;
this.parentNode.parentNode.parentNode.parentNode.g etElementsByTagName('embed')[0].height=515;
} else {
this.innerHTML = '+';
this.title = 'Increase this video\'s size';
this.parentNode.parentNode.parentNode.parentNode.w idth=425;
this.parentNode.parentNode.parentNode.parentNode.g etElementsByTagName('object')[0].width=425;
this.parentNode.parentNode.parentNode.parentNode.g etElementsByTagName('object')[0].height=355;
this.parentNode.parentNode.parentNode.parentNode.g etElementsByTagName('embed')[0].width=425;
this.parentNode.parentNode.parentNode.parentNode.g etElementsByTagName('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
02-20-2009, 12:26 AM
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 video id 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
02-20-2009, 12:40 AM
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
02-20-2009, 02:49 AM
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
02-22-2009, 03:40 PM
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
02-22-2009, 04:01 PM
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
vijayninel
03-17-2009, 06:13 PM
Hey Thanks, a really cool one. :)
Spinball
03-25-2009, 09:27 AM
In Firefox in 3.8.1 it displays the video twice. One above the other, one in the header cell and one in the body cell of the table.
Ah ignore me - I had the passivevid hack installed as well.
Jasem
04-13-2009, 06:23 PM
thank you
ti07shadow
04-21-2009, 03:16 AM
yea guys as said before this has been fully tested of bugs. however if it doesn't work well for you try the following.
- Disabled 1 mod at a time and find out which one may be conflicting with the bbc
if that doesn't work then you may have java script disabled or you cant for some reason see you tube videos. This may be do to your flash player not being up to date or you may not have flash player.
- non of those? well I don't know. all I know is it works for me a many others.
vBulletin® v3.8.12 by vBS, Copyright ©2000-2025, vBulletin Solutions Inc.