jquery - 隐藏的 iframe 视频在 Safari 中四处移动

Question

我有一个带有一些图像的 slider 。单击一张图片时，该图片将被删除，并在其位置添加一个带有嵌入式 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);
             }
        )       
   });
-->