隐藏的 iframe 视频在 Safari 中移动

Question

我有一个带有一些图像的滑块。当点击一张图片时，图片会被移除，并在其位置添加一个嵌入了 vimeo 视频的 iframe。

这在除 Safari 之外的任何地方都很好用。当您在 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

你只会让它不能在 safari 中使用，因此它不会出现在 safari 中，你必须这样做：

<!--
$(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);
             }
        )       
   });
-->