скрытое видео iframe перемещается в Safari

Question

У меня есть слайдер с некоторыми изображениями.Если щелкнуть одно изображение, оно удаляется, и на его место добавляется iframe со встроенным видео vimeo.

Это прекрасно работает везде, кроме 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

Вы просто сделаете так, чтобы его нельзя было использовать в сафари, и чтобы оно не отображалось в сафари, вам придется сделать это:

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