JavaScript: Respondsive Banner

wk00_Demo_Me_banner.html

<script src="/media/javascript/belk.video.js"></script>
<style type="text/css"></style>

<style>

#mask {
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: #000;
    display: none;
    margin: 0;
    padding: 0;
   }

   .window {
    width: 500px;
    height: 281px;
    display: none;
    z-index: 10000;
    padding: 10px;
    background: #FFFFFF;
   }

   .window a.close {
    position: absolute;
    top: -7px;
    right: -7px;
    background: url(http://www.belk.com/media/images/ui/sprites.png) 0 -48px no-repeat;
    width: 15px;
    height: 15px;
    display: block;
    text-indent: -9999px;
   }

   .aside .brand {
    margin: 0 0 20px 0;
   }

   .aside .product {
    margin: 0 0 20px 0;
    float: left;
    width: 150px;
   }

   /* Workaround for IE position: fixed */
   .window, #mask {
    position: absolute; left: 0; top: 0; /* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */
   }
   body > div.window, body > div#mask {
     position: fixed; /* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb 4.5+, iCab, ICEbrowser */
   }
    
   .modalTrigger {
    position: absolute;
    left: 830px;
    top: 55px;
   }

   .modalTrigger img.playIcon {
    height: 30px;
    left: 34px;
    opacity: 0.5;
    position: absolute;
    top: 13px;
    width: 30px;
    }
    .reveal{display:none;}


</style>

<script>
 $(document).ready(function () {
	 belk.video.basic("ElizArden","1972334618001",500,281);
	 
     $('body').children().first().before('<div id="mask"></div>');
	 $('body').children().first().before($('#modalElizArden').detach());
	 
    $('.modalTrigger').click(function(e) {
   
     e.preventDefault();
    $('body').css('overflow','hidden');
    $('body').attr('scroll','no');
   
     $('#mask').fadeTo("slow", 0.6);;

     $(".window").removeClass("active");
     
     var id = $($(this).attr('href'));
    id.addClass("active")
    centerModals(); //Calling window resize function, when ever opening a video modal call the below code to  summon.


     id.fadeIn(2000);
    });
     
    $('.window .close, #mask').live("click", function (e) {
     e.preventDefault();
     $('#mask, .window').fadeOut("fast");

         // code to unlock the scoll 
    $('body').css('overflow','auto');
    $('body').attr('scroll','yes'); 
    
    $(".window").removeClass("active");
    });
   
    jQuery.fn.center = function () {
    this.css("top", Math.floor($(window).height()/2 - $(this).height()/2) - $(this).parent().offset().top + "px");
    this.css("left", Math.floor($(this).parent().width()/2 - $(this).width()/2) + "px");
    return this;
   }
    function  centerModals() {
    var obj = $('.window.active');//------>find the active window and applies window resize code
    var winWidth = belk.video.utils.cleanNumber(obj.css('width')) + belk.video.utils.cleanNumber(obj.css('padding-left')) + belk.video.utils.cleanNumber(obj.css('padding-right')) + belk.video.utils.cleanNumber(obj.css('margin-left')) + belk.video.utils.cleanNumber(obj.css('margin-left'));
    var winHeight = belk.video.utils.cleanNumber(obj.css('height')) + belk.video.utils.cleanNumber(obj.css('padding-top')) + belk.video.utils.cleanNumber(obj.css('padding-bottom')) + belk.video.utils.cleanNumber(obj.css('margin-top')) + belk.video.utils.cleanNumber(obj.css('margin-bottom'));
    var left = $(window).width()/2 - winWidth/2;
    var top = $(window).height()/2 - winHeight/2;
    if (0 > left) left = 0;
    if (0 > top) top = 0;
    $('.window.active').css('position','fixed');
    $('.window.active').css('left',left);
    $('.window.active').css('top',top);
  }

  $(window).resize(centerModals);
 });

</script>

  <img src="http://s7d4.scene7.com/is/image/Belk/wk45_ElizArden_RedDoor_121513?&$P_CONTENT$" border="0" usemap="#MAPS" />
  		<div id="modalElizArden" class="window">
			<a href="#" class="close">[x]</a>
			<div id="ElizArden"></div>
		</div>
<map name="MAPS">
 <area shape="rect" coords="4,2,770,196" alt=" Elizabeth Arden Red Doo The fragrance watch now" title="Elizabeth Arden Red Doo The fragrance watch now"  href="#modalElizArden" class="modalTrigger" style="cursor:pointer;" />
 </map>