# How to optimize this?

This is a user Javascript for youtube, the point is to make the thumbnail bigger on mouseover, I just want some help making it better because I don't want it to waste resources with all the extensions I have and other scrips. I also added Iframes because I have another extencion that makes a preview of the video in the thumbnail. BTW I use Opera so make sure it works on Opera.

/*! settings begin */
//Makes the name of the video apear bellow the image if false (false/true)
var WideSideBar = true;
/*! settings end */

//Get the sidebar were the thumbnails are and the main
var videos = document.getElementById("watch7-sidebar");
var main = document.getElementById("watch7-main");
//Make the SideBar wider
if (WideSideBar) {
main.style.width = "1117px";
videos.style.width = "472px";
}

if (a.target.tagName == "IMG") {
//Make image bigger
a.target.style.width = "292px";
a.target.style.height = "163px";
a.target.style.WebkitTransition = 'width 0.5s, height 0.5s';
a.target.parentNode.parentNode.parentNode.style.width = "292px";
a.target.parentNode.parentNode.parentNode.style.height = "163px";
a.target.parentNode.parentNode.parentNode.style.WebkitTransition = 'width 0.5s, height 0.5s';

//Get a higher resolution image of the thumbnail
var video_id = a.target.parentNode.parentNode.parentNode.parentNode.parentNode.href.split('v=')[1];
var ampersandPosition = video_id.indexOf('&');
if (ampersandPosition != -1) {
video_id = video_id.substring(0, ampersandPosition);
}
a.target.src = "http://img.youtube.com/vi/" + video_id + "/0.jpg";

} else if (a.target.tagName == "IFRAME") {

//Make Iframe AKA:(Thumbnail preview) bigger
a.target.parentNode.style.WebkitTransition = 'width 0.5s, height 0.5s';
a.target.parentNode.style.width = "292px";
a.target.parentNode.style.height = "163px";
}
}, false);

if (a.target.tagName == "IMG") {

//Make image normal size.
a.target.style.width = "120px";
a.target.style.height = "67px";
a.target.parentNode.parentNode.parentNode.style.width = "120px";
a.target.parentNode.parentNode.parentNode.style.height = "67px";
} else if (a.target.tagName == "IFRAME") {
//Make Iframe AKA:(Thumbnail preview) normal size
a.target.parentNode.style.width = "120px";
a.target.parentNode.style.height = "67px";
}
}, false);

-

Why not use the :hover pseudo class and have that trigger the size change? Probably easier than having to worry about event binding. http://jsfiddle.net/nhzNM/

<iframe class="videoPlayer" width="560" height="315" src="http://www.youtube.com/embed/90Omh7_I8vI?controls=0&rel=0" frameborder="0" allowfullscreen></iframe>
<style type="text/css">
.videoPlayer {
width: 560px;
height: 315px;
-webkit-transition: height,width 1s ease;
-moz-transition: height,width 1s ease;
-ms-transition: height,width 1s ease;
-o-transition: height,width 1s ease;
transition: height,width 1s ease;
}

.videoPlayer:hover {
width: 650px;
height: 365px;
}
</style>


You could use the same setup for a thumbnail positioned in front of the video embed.

-
One of the problems is that in youtube I have to change the width and the height of another element so it works. a.target.style.height = "163px"; a.target.parentNode.parentNode.parentNode.style.height = "163px"; –  Joao Silva Feb 17 '13 at 14:28

I don't see anything in your code that should cause any performance issues. You're not doing anything iterative, or performing any complex operations; your code just executes linearly and changes some CSS properties. That shouldn't kill performance.

Have you seen anything to indicate that this code does kill performance? If so then the only thing I could suggest is changing the events that you listen for (or maybe, adding some logic to ensure that you don't start a new transition while the current one is still running), as perhaps the page is triggering more mouseover and mouseout events than you expect.

Premature optimization is the root of all evil, and all that.

Also, you should be able to do:

    video_id = video_id.split('&')[0];  //this works whether or not an & is present


    var ampersandPosition = video_id.indexOf('&');