Increasing size of video thumbnail on mouseover

Question

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 extension that makes a preview of the video in the thumbnail. I also 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";
}

videos.addEventListener("mouseover", function (a) {
    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);

videos.addEventListener("mouseout", function (a) {
    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);

Answer 1

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.

Answer 2

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

...instead of:

    var ampersandPosition = video_id.indexOf('&');
    if (ampersandPosition != -1) {
        video_id = video_id.substring(0, ampersandPosition);
    }

That (probably) won't perform any better, but it's less code to accomplish the same thing.

Answer 3

If you only need IE9+ support, you can use the transform: scale property in CSS, and avoid JavaScript altogether:

img {
  transition: all .2s;
  margin: 50px;
}

img:hover {
  -ms-transform: scale(1.2); /* IE 9 */
  -webkit-transform: scale(1.2) /* Safari, iOS, Android */
  transform: scale(1.2);
}

<img src="http://lorempizza.com/380/240">

IE10 users will not enjoy the transition, but will still see the scale.