Почему iframe загружается 2 раза?

/* Stop vimeo player on click */ 
  function openbox(id,tt) { 
	var div = document.getElementById(id); 
	var tt_div = document.getElementById(tt); 
	if(div.style.display == 'block') { 
		div.style.display = 'none'; 
	} 
	else { 
		div.style.display = 'block'; 
	} 
  } 
 
$(document).click(function() { 
    { 
        var iFrame = $('#tt2 iframe'); 
        var iFrameSRC = iFrame.attr('src'); 
        iFrame.attr('src','');  
        iFrame.attr('src', iFrameSRC); 
    } 
}); 
$(document).click(function() { 
    { 
        var iFrame = $('#tt3 iframe'); 
        var iFrameSRC = iFrame.attr('src'); 
        iFrame.attr('src','');  
        iFrame.attr('src', iFrameSRC); 
    } 
}); 
$(document).click(function() { 
    { 
        var iFrame = $('#tt4 iframe'); 
        var iFrameSRC = iFrame.attr('src'); 
        iFrame.attr('src','');  
        iFrame.attr('src', iFrameSRC); 
    } 
}); 
$(document).click(function() { 
    { 
        var iFrame = $('#tt iframe'); 
        var iFrameSRC = iFrame.attr('src'); 
        iFrame.attr('src','');  
        iFrame.attr('src', iFrameSRC); 
    } 
});

#vid1,#vid2,#vid4,#vid3 { 
 top:0; 
 left:0; 
 position:fixed; 
 background-color:#000000e0; 
 width:100%; 
 height:100%; 
} 
 
#tt,#tt2,#tt3,#tt4 { 
  position:relative; 
  width:60%; 
  padding:12px; 
  height:40%; 
  margin:10% auto auto auto; 
} 
   
div.close { 
  cursor:pointer; 
  position:absolute; 
  font-weight:700; 
  color:white; 
  right:-8px; 
  top:2px; 
  opacity: 1; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="vid1" style="display:none"> 
<center> 
<div id='tt'><div class="close" onclick="openbox('vid1')">X</div> 
 
<div style="padding:56.25% 0 0 0;position:relative;"> 
<iframe src="https://player.vimeo.com/video/269891167" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div> 
  </div> 
</center> 
</div>