iPad Mobile Safari上的YouTube iframe与webkit scale（）一起中断_Ipad_Youtube_Mobile Safari_Scale

iPad Mobile Safari上的YouTube iframe与webkit scale（）一起中断

ipad youtube

iPad Mobile Safari上的YouTube iframe与webkit scale（）一起中断,ipad,youtube,mobile-safari,scale,Ipad,Youtube,Mobile Safari,Scale,下面的示例加载YouTube剪辑，并在2秒内将其缩放到50%。当在iPad上运行时，缩略图会在动画结束时抖动并自行缩放过小为什么会发生这种情况（示例也可从以下网址获得）： var tag=document.createElement（'script'）； tag.src=”http://www.youtube.com/player_api"; var firstScriptTag=document.getElementsByTagName（'script'）[0]； firstScript

下面的示例加载YouTube剪辑，并在2秒内将其缩放到50%。当在iPad上运行时，缩略图会在动画结束时抖动并自行缩放过小

为什么会发生这种情况

（示例也可从以下网址获得）：


var tag=document.createElement（'script'）；
tag.src=”http://www.youtube.com/player_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
var播放器；
函数onYouTubePlayerAPIReady（）{
player=新的YT.player（'player'{
高度：“390”，
宽度：“640”，
videoId:'u1zgFlCw8Aw'，
活动：{
“onReady”：onPlayerReady，
“onStateChange”：onPlayerStateChange
}
});
}
// 4. 当视频播放器准备就绪时，API将调用此函数。
函数onPlayerReady（事件）{
Player=document.getElementById（“Player”）；
Player.style[“-webkit transition”]=“所有2个易入易出”；
Player.style[“-webkit transform”]=“比例（0.5）”；
}
函数onPlayerStateChange（事件）{
}

<html>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>

    <script>
      var tag = document.createElement('script');
      tag.src = "http://www.youtube.com/player_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      var player;
      function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'u1zgFlCw8Aw',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
          Player = document.getElementById("player");
          Player.style["-webkit-transition"] = "all 2s ease-in-out";
          Player.style["-webkit-transform"] = "scale(0.5)";
      }

      function onPlayerStateChange(event) {

      }
    </script>
  </body>
</html>