InterOcean Designs - YouTube Thumbnail Links in Posts

InterOcean Designs :: ProBoards Codes :: ProBoard Code Database :: YouTube Thumbnail Links in Posts

Page 1 of 3 » Jump to page Go

Author

Topic: YouTube Thumbnail Links in Posts (Read 1,678 times)

SubDevo
Co-Admin
Code Support
member is offline

[avatar]

Creator of LSD...

Joined: Mar 2009
Gender: Male

Posts: 2,594
Location: MI, USA
Karma: 102

YouTube Thumbnail Links in Posts
« Thread Started on Aug 13, 2011, 3:42am »

YouTube Thumbnail Links in Posts by SubDevo
Tested in IE, FF, Opera, Safari and Chrome.

This code will convert posted YouTube video URL text links into a clickable thumbnail image link.
The actual thumbnail image for the video is automatically added. Clicking the image will play the video in a popup window. If you want to watch the video on YouTube, click the small "YouTube" logo image.
This is what you will see when you post a YouTube video URL text link...

http://www.youtube.com/watch?v=LpxIj1sW37E http://www.youtube.com/watch_popup?v=1ZUQ59UjCR0

You have a choice of the default background image (shown above), a "black" version or create your own! They can be found at the bottom of this post with instructions for adding your own custom background.

"Hey! Isn't this against PB TOS?"

Not at all. This code is simply converting the YouTube video text link into an image link. No custom UBBC is needed or used. It does not block, remove, change or move any PB ads or modify an embedded video that has been added with the YouTube UBBC. It does not convert any links that the user has already made into an image or is using custom text for the link.

Enjoy!!!

SubDevo

More info:
The image is added inline. That means you can put them right next to each other in the same row.
If the code is removed, all YouTube links go back to normal text links.
The code also has a CSS section. Be careful when changing any of the values in it. I took great care to make sure it looks exactly the same in all the browsers I tested this code in.
If you wish to use your own images, read the "Advanced" section below the code posts.

Variables: There is only one...

var ytLogo="http://i53.tinypic.com/2h4jkzk.png"; // Logo Image URL
Enter the URL to your own logo image. This will be the link to watch on YouTube.

Location: Global Footer

Code:
<style type="text/css">
/* YouTube Thumbnail Links by SubDevo CSS */
.yt_container {
   display: inline-block;
   background: url(http://i52.tinypic.com/6hkrp4.png) no-repeat;
   text-align: center;
   height: 137px;
   width: 144px;
   margin-bottom: 5px;
}
.yt_thumb {
   position: relative;
   top: 8px;
   height: 90px;
   border: 0px;
}
.yt_logo {
   position: relative;
   top: 8px;
   right: 0px;
   border: 0px;
}
</style>

<script type="text/javascript">
/* YouTube Thumbnail Links in Posts by SubDevo */
/* Global Footer - Please leave this header intact. Do not repost. */
/* [url]http://interoceandesigns.com[/url] or [url]http://lsdp.proboards.com[/url] */

var ytLogo="http://i53.tinypic.com/2h4jkzk.png"; // Logo Image URL

if(/(calendar|pm|pre)view|search2|display/i.test(pb_action)){
   var n=document.getElementsByTagName("font"),a,b,e,f,i,m,t="_blank",yt,x=-1;
   yt=/(http:\/\/www.youtube\.com\/watch)(_popup)?\?v=(.+?)($|&)/i;
   while(n[++x]){
      if(n[x].innerHTML.indexOf("google_ad_section")!=-1){
         a=n[x].getElementsByTagName("a");i=-1;
         while(a[++i]){ m=a[i];
            if(yt.test(m.href)&&yt.test(m.innerHTML)){
               e=RegExp.$1; f=RegExp.$3; b=document.createElement("span");
               m.innerHTML="<img class='yt_thumb' src='http://img.youtube.com/vi/"+f+"/default.jpg' "+
               "title='Watch in Popup' \/>"; f="?v="+f; m.href=e+"_popup"+f; m.target=t;
               if(document.uniqueID){b.style.marginRight="5px";}
               b.className="yt_container"; m.parentNode.insertBefore(b,m); b.appendChild(m);
               b.innerHTML+="<br><div style='text-align: right;'><a href='"+
               e+f+"' target='+t+' ><img class='yt_logo' src='"+ytLogo+
               "' title='Watch on YouTube' /><\/a><\/div>";
}}}}}
</script>

Some of you may want a larger thumbnail. This is about 33% larger. Be aware that the image is resized on the fly and the quality of the resized image is dependent upon the browser and version the user is viewing with. IE7 has the worst resize algorithm and it doesn't look that great. Just something to keep in mind.
Use this image as the logo image in var ytLogo in the code: http://i55.tinypic.com/2mp0t3p.png

And replace the CSS portion with this:

<style type="text/css">
/* YouTube Thumbnail Links by SubDevo CSS */
.yt_container {
display: inline-block;
background: url(http://i51.tinypic.com/90vbzp.png) no-repeat;
text-align: center;
height: 190px;
width: 200px;
margin-bottom: 5px;
}
.yt_thumb {
position: relative;
top: 8px;
height: 125px;
border: 0px;
}
.yt_logo {
position: relative;
top: 8px;
right: 0px;
border: 0px;
}
</style>

Advanced:

You may use your own image for the background of the thumbnail and also for the logo.
The background URL is put into the CSS. The Logo image URL goes into the script (code).

.yt_container

This affects the entire thumbnail.
The background image goes here and also the height and width of the image used.
Putting a border statement here will surround the entire thumbnail.

.yt_thumb

This affects the actual YouTube thumbnail image.
Use higher values for "top" to move it down.
Keep the height set to 90 for the default YouTube thumbnail image size. Anything larger than 90 will stretch the image and the quality of it will lessen.
Changing border from "0" will put a border around the actual YouTube thumbnail.

.yt_logo

This affects the small logo image that you set in the code.
Use higher values for "top" to move it down.
Use higher values for "right" to move it to the LEFT.
Changing border from "0" will put a border around the logo image.

For reference:

Small Background:
Default: http://i52.tinypic.com/6hkrp4.png
Black: http://i51.tinypic.com/20jigrn.png
Logo: http://i53.tinypic.com/2h4jkzk.png

Large Background:
Default: http://i51.tinypic.com/90vbzp.png
Black: http://i51.tinypic.com/2znr1mx.png
Logo: http://i55.tinypic.com/2mp0t3p.png

Examples:

[image]

« Last Edit: Aug 16, 2011, 10:34am by SubDevo »