[CB] YouTube Video Avatar

[Chris]

This code uses Youtube APIs (through a third party) that is no longer valid and as a result no longer works. An updated code using the APIs hosted by Google (since Google acquired Youtube) is currently in the works and can be seen at the demo link provided below. Watch this space for the posting of the new code after it has been tested or PM me if you wish to beta test it. An existing Youtube account with at least one playlist or fave list is desirable but not necessary

Description:

---

Allows your Proboards avatar to be a Youtube video.

Preview:

---

click on avatar here to see it in action



Script:

---

<script type="text/javascript">
<!--
/* Youtube Video as Avatar - Eton Bones */
/* Installation: Global Footer */
var bg_color='#ffffff' // color of video raster
//avatar should be an url to the thumbnail of the youtube video
/*example:
if video is http://youtube.com/watch?v=aeIOu123
then link to thumbnail would be http://img.youtube.com/vi/aeIOu123/2.jpg
Additional videos can be added in the website url field by adding "?v=aeIOu123&v=abCDe321" and so on...
use "?" if no "?" is already in the url then use "&" for each subsequent video added
*/
if(location.search.match(/action=(display|search2|(user)?recent|(pm)?view|goto)/)){
var mp=document.getElementsByTagName('td');
for(i=0;i<mp.length;i++){
if(mp[i].width=="20%" && mp[i].vAlign=="top" && mp[i].innerHTML.match(/Posts:\s\d/)){
var av = mp[i].getElementsByTagName('center')
if(av.length){
av=av[0].getElementsByTagName('img')
var id=[];
var pid=(mp[i].getElementsByTagName('a')[0].name.length)?mp[i].getElementsByTagName('a')[0].name: mp[i].getElementsByTagName('a')[0].href.match(/\buser=([^&?]+)/)[1]
if(av.length && av[0].alt=='[avatar]' && av[0].src.match(/img\.youtube\.com\/vi\/(.+?)\/\d\.jpg/i)){
id.push(RegExp.$1);
for(j=1;j<av.length;j++){
if(av[j].alt=='[homepage]' && av[j].parentNode.href.split(/\bv=/i).length){
av[j].parentNode.href.replace(/\bv=([^&?]+)/gi,function(m,p){id.push(p);return m});
break;
}
}
var xmp=document.createElement('div');
var fv='xiRedirectUrl='+ window.location + '&fxml=%3CEffect%20height%3D%22'+ av[0].height+ '%22%20width%3D%22'+ av[0].width+ '%22%20bgcolor%3D%22'+ encodeURIComponent(bg_color)+ '%22%3E%3CSlideShow%20autoAdvance%3D%22false%22%20gap%3D%220%22%3E'
for(j=0;j<id.length;j++)
fv+= '%3CYouTubeVideo%20videoId%3D%22'+ id[j]+ '%22/%3E'
fv+= '%3C/SlideShow%3E%3C/Effect%3E&url='+ location.href
emb='<embed src="http://www.effectgenerator.com/1.0.6/EffectMovie.swf" bgcolor="'+ bg_color+ '" play="false" loop="false" quality="autohigh" wmode="transparent" allownetworking="internal" '
emb+='flashvars="'+fv+ '" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" align="middle" height="'+ av[0].height+ '" width="'+ av[0].width+ '" name="youtube+video_player">'
xmp.innerHTML='<xmp id="'+pid+'" style="display:none;">'+emb+'</xm'+'p>'
av[0].parentNode.insertBefore( document.createElement('div'), av[0])
av[0].previousSibling.innerHTML="Youtube video"
av[0].parentNode.insertBefore(xmp.lastChild,av[0])
av[0].title="Click to play video"
av[0].onclick=function(evt){
evt=("undefined"==typeof evt)?event:evt
var thiss=(evt.srcElement||evt.target);
var v=document.createElement('div');
v.innerHTML=thiss.previousSibling.innerHTML.replace(/&l{1}t;/gi,"<").replace(/&g{1}t;/gi,">").replace(/&am{1}p;/gi,"&");
thiss.parentNode.replaceChild(v.lastChild,thiss);
}
}
}
}
}
}

//-->
</script>

Setup:

---

Place in global footer
Once installed edit your profile and add the thumbnail of the video you want to use as your avatar

Example:
If you wanted to use the video at http://youtube.com/watch?v=FB2WUSvQStg then the url to the default thumbnail for that video would be http://img.youtube.com/vi/FB2WUSvQStg/2.jpg.

Set the height and width of the avatar as well since the video player will use those to define its own dimensions.

All you need to do is take the ID of the video (the red part) and plug it into the image url to get the thumbnail. You could also try 1.jpg and 3.jpg to see if you like those images better but Youtube always uses 2.jpg which is usually a snapshot from a keyframe located in the middle of the video.

You can also add extra videos that will play after the initial video by editing your website url field and adding v=videoID to the end of the url.

Example:

• 1. main video I chose to use the "Kelly Rowland - Work" video (http://youtube.com/watch?v=FB2WUSvQStg) as my main avatar video so I plugged in the ID of the video into this url http://img.youtube.com/vi/FB2WUSvQStg/2.jpg to create my avatar image then set the width and height to 100.
  
• 2. extra videos I also wanted the "Mark Ronson - Just" video (http://youtube.com/watch?v=fxu5CUPRU-U) to play after the first video finished. Since I had no website set in my profile I added one (any will do) then added my second video like this http://google.com/search?v=fxu5CUPRU-U. If I wanted to add a third, fourth, etc I would keep adding: http://google.com/search?v=fxu5CUPRU-U&v=aeIOu123&v=BcDEf999
  
  

*If there is no "?" (question mark) in the url already then add one
before adding your extra videos else just use an "&" (ampersand) when
adding more videoIDs

Browser Compatibility:

---

Tested in IE7, Firefox 2, Opera 9 and Safari for windows

Notes:

---

• This code uses the chromeless player rather than the standard embeddable youtube player for several reasons:
  • It blends in better with any site
    
  • It allows defining playlists from the site rather than using one from youtube
    
  • It will play videos not normally playable in the standard player (i.e. videos marked "Embedding disabled by request" in the embed code field)
    
  
  
• If the instructions on inserting a Youtube video into your avatar seem a bit too complex then you can add this second code to your main footer which will do all the calculations and conversions for you. While modifying profile simply select "youtube avatar" from the drop down list of pre-made avatars and enter the url to the video you'd like to use.<script type="text/javascript">
<!--
/* Youtube Avatar Editor - Eton Bones*/
/*Main Footer*/
if(location.search.match(/action=modifyprofile/) && document.modifyForm){
function avSize(event){
var thiss = (event.target||event.srcElement)
var atrib= thiss.name.replace(/avatar/,'')
document.images.avatarImage[atrib] = (!isNaN(thiss.value))?parseInt(thiss.value):document.images.avatarImage.width
}

function doAvs(event){
if(document.modifyForm.avatar.options[document.modifyForm.avatar.selectedIndex].text=="youtube video"){
ytv=true;
while(ytv){
ytv=prompt('Please enter the URL to the video you would like to set as your avatar')
if(ytv && ytv.length){
if( /youtube\.com/i.test(ytv) && ytv.match(/(?:\/v\/|\bv=)([^&'">]+)/i)){
document.modifyForm.avatarurl.value = "http://img.youtube.com/vi/" + RegExp.$1 + "/2.jpg"
document.modifyForm.avatarwidth.value = "100"
document.modifyForm.avatarheight.value = "100"
document.images.avatarImage.src = document.modifyForm.avatarurl.value
if((document.modifyForm.avatar.selectedIndex+1)==document.modifyForm.avatar.options.length)
document.modifyForm.avatar.options[document.modifyForm.avatar.options.length]=new Option('additional youtube video','')
ytv=false
}else{
ytv=confirm('"'+ytv+'"\ndoes not appear to be a valid url to a youtube video. Do you want to try again?')
}
}
}
document.modifyForm.avatar.options[0].selected=true
}else if(document.modifyForm.avatar.options[document.modifyForm.avatar.selectedIndex].text=="additional youtube video"){
ytv=true;
while(ytv){
ytv=prompt('You have '+ String((document.modifyForm.websiteurl.value.length)?(document.modifyForm.websiteurl.value.split(/\bv=/i).length-1):0) +' additional video(s) set. If you\'d like to add an additional video which would play in your avatar after the main video then enter the youtube url below. Click cancel if or when you have no more videos to add.')
if(ytv && ytv.length){
if( /youtube\.com/i.test(ytv) && ytv.match(/(?:\/v\/|\bv=)([^&'">]+)/i)){
yti = RegExp.$1
if(document.modifyForm.websiteurl.value.length==0){
document.modifyForm.websiteurl.value = 'http://'+location.host + '/?'
document.modifyForm.websitename.value = document.title.split(' -')[0].substr(0,document.modifyForm.websitename.maxLength)
}
if((document.modifyForm.websiteurl.value.length + yti.length)>document.modifyForm.websiteurl.maxLength){
alert('Not enough room in website field to add to add this additional video')
ytv=false; break;
}
document.modifyForm.websiteurl.value += ((document.modifyForm.websiteurl.value.split(/\?/).length>1)?'&':'?') + 'v=' + yti
document.images.avatarImage.src = "http://img.youtube.com/vi/" + yti + "/2.jpg"
}else{
ytv=confirm('"'+ytv+'"\ndoes not appear to be a valid url to a youtube video. \n\nHere is an example of the expected url format...\nhttp://youtube.com/watch?v=x7Z4dxjRv4g\n\nDo you want to try again?')
}
}
}
document.modifyForm.avatar.options[0].selected=true
}else if (document.modifyForm.avatar.options[document.modifyForm.avatar.selectedIndex].value.indexOf('http://') == -1){
document.images.avatarImage.src= 'http://s3.images.proboards.com/avatars/'+ document.modifyForm.avatar.options[document.modifyForm.avatar.selectedIndex].value +'.gif';
}else{
document.images.avatarImage.src = document.modifyForm.avatar.options[document.modifyForm.avatar.selectedIndex].value;
}
}
document.modifyForm.avatar.options[document.modifyForm.avatar.options.length]=new Option('youtube video','')
if(/img\.youtube\.com\/vi\//i.test(document.images.avatarImage.src))
document.modifyForm.avatar.options[document.modifyForm.avatar.options.length]=new Option('additional youtube video','')

document.modifyForm.avatarwidth.onchange = document.modifyForm.avatarheight.onchange = avSize

}
//-->
</script>