iPad: Мобильный Safari, HTML5 <видео> и переходы jQuery

Я создаю простое подтверждение концепции определенного для iPad веб-сайта, который использовал бы видео переходы, чтобы принести пользователям от раздела до раздела. В целях подтверждения концепции каждый "раздел" является просто изображением с полупрозрачным текстовым полем содержания, расположенным выше его. Существует всего 2 раздела, "домой" и "контакт", и у них есть видео перехода, зажатое между ними через z-индексацию. Идея для подтверждения концепции состоит в том, что нажатие на "домашний" раздел заставляет его исчезать, сопровождаемое воспроизведением видео перехода, которое (после завершения) исчезает для раскрытия раздела "контакта". Все хорошо работает с этой версией демонстрации на iPad и на Safari для Windows и OS X. Вот JS:

var myVideo = document.getElementsByTagName('video')[0];
$('document').ready(function() {
  $('#home').click(function() {
    $(this).css('display','none');
    myVideo.play();
    myVideo.addEventListener('ended', function() {
      $('#transition').css('display','none');
    });
  });
});

То, что я хотел бы сделать, использовать jQuery fadeOut() эффект постепенно исчезнуть текстовое поле до запуска видео, когда "домашний" раздел нажат. Код кажется достаточно простым:

$('document').ready(function() {
  $('#home').click(function() {
    $('#home-copy').fadeOut('slow', function() { 
      $('#home').css('display','none');               
      myVideo.play();
      myVideo.addEventListener('ended', function() {
        $('#transition').css('display','none');
        $('#home-copy').fadeIn('slow');
      });
    });
  });
});

и это работает точно, как желаемый над настольными версиями Safari. На iPad, однако, текстовое поле постепенно исчезает как ожидалось, и домашний раздел исчезает также, но видео упрямо отказывается начинать играть. Я действительно не знаю, почему это имело бы место, но это - то, что происходит. Я ценил бы любой совет, который Вы могли бы иметь!

Кстати, вот разметка:

<div id="main-container">
  <div id="home-copy">
    <h1>Lorem Ipsum Dolor Sit Amet</h1>
    <p>Donec blandit pharetra luctus. Nam at porttitor odio. Nullam sem orci, venenatis sed pharetra eget, commodo rhoncus quam. Ut euismod vehicula bibendum. Curabitur in magna ante, id fringilla lacus. Nullam id elit eget lacus feugiat porta. Nulla vitae orci vehicula risus sagittis egestas quis sed justo.</p>
  </div>    
  <div id="home">
    <img src="images/home.jpg" width="1152" height="720" />
  </div>
  <video id="transition" src="video/home_to_contact_lo_res.mp4" preload width="1152" height="720"></video>
  <div id="contact">
    <img src="images/contact.jpg" width="1152" height="720" />
  </div>
</div>