container resizing problem

[avrilkim]

when browser resizing, container can't get right scale.
so i thought you should divide code to resize part.

`
original version ----- start line number 227

  var width = container.width(),
    pWidth, // player width, to be defined
    height = container.height(),
    pHeight, // player height, tbd
    $YTPlayerPlayer = $('#' + self.holderID);

  // when screen aspect ratio differs from video, video must center and underlay one dimension
  if (width / self.options.ratio < height) {
    pWidth = Math.ceil(height * self.options.ratio); // get new player width
    $YTPlayerPlayer.width(pWidth).height(height).css({
      left: (width - pWidth) / 2,
      top: 0
    }); // player width is greater, offset left; reset top
  } else { // new video width < window width (gap to right)
    pHeight = Math.ceil(width / self.options.ratio); // get new player height
    $YTPlayerPlayer.width(width).height(pHeight).css({
      left: 0,
      top: (height - pHeight) / 2
    }); // player height is greater, offset top; reset left
  }

`

`
i suggest -------------------------------

  var width = container.width(),
    pWidth, // player width, to be defined
    height = container.height(),
    pHeight, // player height, tbd
    $YTPlayerPlayer = $('#' + self.holderID);

  if (!self.options.fitToBackground) { // container mode
    height = Math.ceil(9 * width / 16) ;
    $YTPlayerPlayer.width(width).height(height);
    if (width / self.options.ratio < height) {
      pWidth = Math.ceil(height * self.options.ratio); // get new player width
      $YTPlayerPlayer.css({
        left: (width - pWidth) / 2,
        top: 0
      }); // player width is greater, offset left; reset top
    } else { // new video width < window width (gap to right)
      pHeight = Math.ceil(width / self.options.ratio); // get new player height
      $YTPlayerPlayer.css({
        left: 0,
        top: (height - pHeight) / 2
      }); // player height is greater, offset top; reset left
    }
  }else{ // fullscreen mode
    // when screen aspect ratio differs from video, video must center and underlay one dimension
    if (width / self.options.ratio < height) {
      pWidth = Math.ceil(height * self.options.ratio); // get new player width
      $YTPlayerPlayer.width(pWidth).height(height).css({
        left: (width - pWidth) / 2,
        top: 0
      }); // player width is greater, offset left; reset top
    } else { // new video width < window width (gap to right)
      pHeight = Math.ceil(width / self.options.ratio); // get new player height
      $YTPlayerPlayer.width(width).height(pHeight).css({
        left: 0,
        top: (height - pHeight) / 2
      }); // player height is greater, offset top; reset left
    }
  }

`

i attached file as well, after i fixed it. it works very well
jquery.youtubebackground_avrilkim.js.zip

[radmedov]

@avrilkim Great job! Thank you.