JavaScript 在悬停时缩放 YouTube

Question

我有两个 YouTube iframe，我想缩放（悬停时）并从占位符图片后面显示（单击时）。代码有冲突。任何帮助或建议将不胜感激！看看我想要完成什么www.vgtesting.co.nf（遛狗标签）。

html

<div id="videoandmapwrap">
    <div id="coveragemap"><img src="photos/forrestmap.jpg" class="piccon" width="200" height="200" data-video="//www.youtube.com/embed/KT-01IRqXB4?feature=player_embedded" />
  </div><!--end coveragemap-->
  <div id="piccon"> <iframe class="piccon" width="200" height="200" src="//www.youtube.com/embed/KT-01IRqXB4?feature=player_embedded"></iframe>
  </div><!--end piccon-->
  </div><!--end videoandmapwrap-->

js

 <script type="text/javascript">
//to reveal from behind placeholder picture
           $('img').click(function(){
        video = '<iframe class="piccon" width="200" height="200" src="'+ $(this).attr('data-video') +'"></iframe>';
        $(this).replaceWith(video);
    });
//to scale up on hover
var current_h = null;
var current_w = null;

$('.piccon').hover(
    function(){
        current_h = $(this, 'img')[0].height;
        current_w = $(this, 'img')[0].width;
        $(this).stop(true, false).animate({width: (current_w * 2.7), height: (current_h * 2.7)}, 900);
    },
    function(){
        $(this).stop(true, false).animate({width: current_w + 'px', height: current_h + 'px'}, 400);
    }
);
     </script>

//using event delegation
//to reveal from behind placeholder picture
           $('#videoandmapwrap').on("click","img",function(event){
             event.preventDefault();
        video = '<iframe class="piccon" width="200" height="200" src="'+ $(this).attr('data-video') +'"></iframe>';
        $(this).replaceWith(video);  
    });
//to scale up on hover
var current_h = null;
var current_w = null;

$('#videoandmapwrap').on("hover","img", function(event){
        current_h = $(this, 'img')[0].height;
        current_w = $(this, 'img')[0].width;
        $(this).stop(true, false).animate({width: (current_w * 2.7), height: (current_h * 2.7)}, 900);
    },
    function(){
        $(this).stop(true, false).animate({width: current_w + 'px', height: current_h + 'px'}, 400);
    }
  event.preventDefault();
);