숨겨진 iframe 동영상이 Safari에서 움직입니다.

Question

일부 이미지가있는 슬라이더가 있습니다. 하나의 이미지를 클릭하면 그림이 제거되고 내장 된 vimeo 비디오가있는 iframe이 추가됩니다.

이것은 사파리를 제외한 모든 곳에서 훌륭하게 작동합니다. Safari에서 동영상을 클릭하면 동영상이 iframe 외부와 거의 중간에 표시되어 대부분의 동영상이 끊어집니다. 컨트롤을 볼 수 없으므로 비디오를 일시 중지 할 수 없습니다. 하지만 여전히 재생됩니다.

왜 그렇게 움직입니까? FF와 Chrome에서와 같이 부모 컨테이너 안에 있어야합니다.

$(document).ready(function() { 
$('.flexslider').flexslider({ 
    animation: 'slide', 
    controlNav: false, 
    slideshow: false, 
    }); 

$("#iframeContainer").click(
    function() { 
     $('#holdFrame').hide(); 
     var someText = '<iframe src="http://player.vimeo.com/video/35534572?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=1&amp;color=ffffff" width="960" height="540" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'; 
     var newDiv = $("<div>").append(someText); 
      $(this).append(newDiv); 
      } 
     )  
    }); 

그리고 HTML :

<div class="flexslider"> 
    <ul class="slides"> 
    <li> 
    <div id="iframeContainer"> 
     <img src="MotorolaStill_Patt.jpg" id="holdFrame" /> 
    </div> 
    </li> 
    <li> 
    <img src="MOTOROLA_BTS_01.jpg" /> 
    </li> 
    <li> 
    <img src="MOTOROLA_BTS_02.jpg" />  
    </li> 
    </ul> 
</div> 

Answer 1

당신은 당신이 사파리에서 사용하지 못할, 그래서 그것은 사파리에 표시되지 않습니다, 당신이해야 할 것입니다 그것을 만들 것입니다 :

<!-- 
$(document).ready(function() { 
$('.flexslider').flexslider({ 
    animation: 'slide', 
    controlNav: false, 
    slideshow: false, 
    }); 

$("#iframeContainer").click(
    function() { 
     $('#holdFrame').hide(); 
     var someText = '<iframe src="http://player.vimeo.com/video/35534572?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=1&amp;color=ffffff" width="960" height="540" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'; 
     var newDiv = $("<div>").append(someText); 
      $(this).append(newDiv); 
      } 
     )  
    }); 
-->