Пример ниже загружает клип YouTube и масштабирует его до 50% в течение 2 секунд.При запуске на iPad миниатюра дрожит и масштабируется слишком мало в конце анимации.
Почему это происходит?
(Пример также доступен на http://pastehtml.com/view/boy9rz76w.html):
<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>