EYO-AIM v1.2 (Embed Youtube Over An Image Mod)

[yotsume]

EYO-AIM v1.2
Embed Youtube Over An Image Mod
Designed by: Yotsume


COMPATIBILITY NOTE: This mod works with vBulletin 3.6, 3.7, 3.8, and 4x as well as with vBadvanced.
DESCRIPTION: This code will allow you to embed a Youtube video in any forum post that you allow html to be posted by a select usergoup. The code will also work in any standalone html based webpage across all browsers. So you can use vBadvanced to call the html page with this code in it as well. You can use any image as the background so long as the dimensions match the youtube embed code. (I will be designing a few other background images as players soon that I will release in the next version of this mod. If you design an image for the background, please post it here for us all and I will include it in the download file.)
PREREQUISITE: You must first install the mod: "Allow Usergroups to post HTML"
https://vborg.vbsupport.ru/showthread.php?t=229035
INSTRUCTIONS: 1. Install the mod: "Allow Usergroups to post HTML (https://vborg.vbsupport.ru/showthread.php?t=229035)".

2. Edit a usergroup that you wish to allow the posting of html.

4. Upload the iphone.gif image file to your images folder or any select location you desire. (Note: I made this iphone.gif transparent so if you edit it or alter it you should use a quality program like Photoshop to retain its transparency.)

5. Paste the following code into the body of your post:

<table style="width: 450px; height: 235px;" align="center" background="http://www.your.domain.com/images/iphone.gif" cellpadding="0" cellspacing="0"><tbody><tr><td class="style2"><center><object style="width: 295px; height: 197px;" align="middle"><embed src="http://www.youtube.com/v/jZ5tdi55K1w&hl=en_US&fs=1&rel=0&color1=0x3a3a3a&color2=0x999999" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" align="middle" width="295" height="197"></object></center></td></tr></tbody></table>6. Change the first url in BLUE to point to where you uploaded the iphone.gif image file.

7. Change the second url in RED for the Youtube video you wish to embed in your post.

8. Save your new post or reply and your video should show up perfectly centered in your post.
IMPORTANT NOTE: You must use Youtube's embed URL found in the embed code and not the normal video link. In my example I have disabled related videos: rel=0
Live Demo: (sorry demo is currently not available)

FUTURE DEVELOPMENTS: -Convert this mod to a BB Code format. DONE!!!
-Include the transparent mode line of code so the flash will not show over other site elements.
-Embed video over other images not just an iPhone.
-Ability to choose what background you want as you are creating a new post or reply.
Change Log:Version 1.2 - My MOD can now be used as a BBCode to embed Youtube video IDs.
Version 1.0 - Initial Release
Instructions for using my MOD as a BBCode:Title: Youtube
BB Code Tag Name: yt
Replacement:
<table style="width: 450px; height: 235px;" align="center" background="http://www.yourdomain.com/images/iphone.gif" cellpadding="0" cellspacing="0"><tbody><tr><td class="style2"><center><object style="width: 295px; height: 197px;" align="middle"><embed src="http://www.youtube.com/v/{param}?hl=en_US&amp;version=3&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" align="middle" width="295" height="197"></object></center></td></tr></tbody></table>

Example: TiQ8c11dkU0

Description: Embed any Youtube video in a post with the video's ID not the full URL. Videos will display over an image of either and iPhone or TV depending on which you chose in the code to use.

Use {option}: No

Button Image (Optional): http://www.yourdomain.com/images/buttons/youtube.gif

Remove Tag If Empty: Yes
Disable BB Code Within This BB Code: Yes
Disable Smilies Within This BB Code: Yes
Disable Word Wrapping Within This BB Code: Yes

[yotsume]

Additional Background Images
(I will update this post to include other background images.)


TV Youtube Player Code and Background Image:

<table style="width: 380px; height: 240px;" align="center" background="http://www.your.domain.com/images/tvgif.gif" cellpadding="0" cellspacing="0"><tbody><tr><td class="style2"><center><object style="width: 260px; height: 168px;" align="middle"><embed src="http://www.youtube.com/v/OJSpgiwrPP0&hl=en_US&fs=1&rel=0&color1=0x3a3a3a&color2=0x999999" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" align="middle" width="260" height="168"></object></center></td></tr></tbody></table>

INSTRUCTIONS:
Upload the attahed tvgif.gif to your webspace.
Change the url in red to point to where you uploaded the tv image.
Change the url in blue to match the embed url for the Youtube video you wish to embed into your post.

[abdobasha2004]

very nice
thanks

[COL NIL SATIS]

looks cool

[yotsume]

<font color="DarkRed">TV Background Image Added!</font>

I just added a TV player image and embed code that you will find in the second post. I will use the second post to add more background images for this mod and their embed codes.

NOTE: Each new background image will require its own unique embed code because each image has different dimensions which must be adjusted in the embed code.

ENJOY!

[yotsume]

WOW I expected more people to like this. Oh well. Not sure I will continue to develop it...

[Loget]

When I first saw the title.. I was like "awesome" but when I seen this.. "Allow Usergroups to post HTML" .. then I thought umm.. (should I install it? or not?) :(

[yotsume]

Yes I know how you feel.... however the add on to control who can use HTML in a post is awesome. I am the main admin of my site and only I can use html. So You can now allow the use of html per individual members. It is not just for a whole usergroup.

So by restricting the use of html my board remains secure!

The possibility for really making styled background images to act as the players skin is limitless.

[Dorgham]

Coordinated and wonderful
Thank you :)

[yotsume]

Glad you like it! Did you use my image or did you design your own?

Coordinated and wonderful
Thank you :)

[yotsume]

I am planning to update my MOD here to convert it to a BBCode. I also learned that if your forum has an SSL certificate installed and your connection is secured behind HTTPS all you have to do is add the "S" to the Youtube embed code making it https rather then http for my MOD to work.

[yotsume]

BBCode Version:
Title: Youtube

BB Code Tag Name: yt

Replacement:
<table style="width: 450px; height: 235px;" align="center" background="http://www.yourdomain.com/images/iphone.gif" cellpadding="0" cellspacing="0"><tbody><tr><td class="style2"><center><object style="width: 295px; height: 197px;" align="middle"><embed src="http://www.youtube.com/v/{param}?hl=en_US&amp;version=3&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" align="middle" width="295" height="197"></object></center></td></tr></tbody></table>
Example: TiQ8c11dkU0

Description: Embed any Youtube video in a post with the video's ID not the full URL.

Use {option}: No

Button Image (Optional): http://www.yourdomain.com/images/buttons/youtube.gif or tv.gif)
Remove Tag If Empty: Yes
Disable BB Code Within This BB Code: Yes
Disable Smilies Within This BB Code: Yes
Disable Word Wrapping Within This BB Code: Yes