Increasing size of video thumbnail on mouseover 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('&amp;');
        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);
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/

&lt;iframe class="videoPlayer" width="560" height="315" src="http://www.youtube.com/embed/90Omh7_I8vI?controls=0&amp;rel=0" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
&lt;style type="text/css"&gt;
.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;
}
&lt;/style&gt;


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