trying to get an iframe to work in a mouseenter popup div using jquery

Question

i've created a fiddle to show what my problem is. but basically I have a popup div with a video in it. But when you mouse over the iframe, i guess it thinks that is considered mouseout and it closes the window. how can I make it stay open and be interactive? http://jsfiddle.net/qjm0vr1b/

$(".link_comm").css('display', 'none');
$(".link_store").css('display', 'none');
$(".link_tower").css('display', 'none');

$('a.comm').mouseenter(function() {
  $('.link_store').fadeOut("slow", function() {
    $('.link_comm').fadeIn("slow");
  });
  $('.link_tower').fadeOut("slow", function() {
    $('.link_comm').fadeIn("slow");
  });
  $('.link_comm iframe').hover(function() {
    $(this).parent().find('a').fadeIn();
  });
});

$('a.store').mouseenter(function() {
  $('.link_comm').fadeOut("slow", function() {
    $('.link_store').fadeIn("slow");
  });
  $('.link_tower').fadeOut("slow", function() {
    $('.link_store').fadeIn("slow");
  });
});

$('a.tower').mouseenter(function() {
  $('.link_store').fadeOut("slow", function() {
    $('.link_tower').fadeIn("slow");
  });
  $('.link_comm').fadeOut("slow", function() {
    $('.link_tower').fadeIn("slow");
  });
});

$('.link_comm, .link_store, .link_tower').mouseout(function() {
  $(this).fadeOut('slow');
});

.link {
  display: inline-block;
  height: 50px;
  margin: 10px 0;
  width: 50px;
}
.comm {
  background-color: #990DB4;
}
.store {
  background-color: #BE1E05;
}
.tower {
  background-color: #05BA2F;
}
.link_comm,
.link_store,
.link_tower {
  position: absolute;
  background: #efefef;
  z-index: 1000;
}

<div id="auxlinks">
  <div class="links">
    <a href="http://commuterservices.utah.edu/" target="_blank" class="link comm"></a>
    <a href="http://www.campusstore.utah.edu/utah/home.aspx" target="_blank" class="link store"></a>
    <a href="http://stadium.utah.edu/about/tower/" target="_blank" class="link tower"></a>
  </div>
  <!--links-->

  <!-- HIDDEN / POP-UP DIV -->

  <div class="link_comm">
    <h6>Commuter Services</h6> 
    <iframe title="YouTube video player" class="youtube-player" type="text/html" width="400" height="300" src="http://www.youtube.com/embed/rgpU02NEmy0" frameborder="0" allowfullscreen>
    </iframe>
    <p></p>
  </div>
  <!--link_comm-->
  <div class="link_store">
    <h6>Campus Store</h6>
    <p></p>
  </div>
  <!--link_store-->
  <div class="link_tower">
    <h6>Stadium and Arena</h6>
    <p></p>
  </div>
  <!--link_tower-->
</div>
<!--auxlinks-->

Answer 1

It's because you have a mouseout event for those links. The iframe div should stay if you change that to mouseleave -

$('.link_comm, .link_store, .link_tower').mouseleave(function() {
   $(this).fadeOut('slow');
 });