Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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) { = "1117px"; = "472px";

videos.addEventListener("mouseover", function (a) {
    if ( == "IMG") {
        //Make image bigger = "292px"; = "163px"; = 'width 0.5s, height 0.5s'; = "292px"; = "163px"; = 'width 0.5s, height 0.5s';

        //Get a higher resolution image of the thumbnail
        var video_id ='v=')[1];
        var ampersandPosition = video_id.indexOf('&');
        if (ampersandPosition != -1) {
            video_id = video_id.substring(0, ampersandPosition);
        } = "" + video_id + "/0.jpg";

    } else if ( == "IFRAME") {

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

videos.addEventListener("mouseout", function (a) {
    if ( == "IMG") {

        //Make image normal size. = "120px"; = "67px"; = "120px"; = "67px";
    } else if ( == "IFRAME") {
        //Make Iframe AKA:(Thumbnail preview) normal size = "120px"; = "67px";
}, false);
share|improve this question

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

<iframe class="videoPlayer" width="560" height="315" src="" 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;

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

share|improve this answer
One of the problems is that in youtube I have to change the width and the height of another element so it works. = "163px"; = "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

...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.

share|improve this answer

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="">

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

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.