HTML5 video unable to playback in iPad after .appendTo or .detach

Question

I'm running into an interesting issue where my video is unable to play back in iPad after .appendTo or .detach. It presents a play button, but when the play button is pressed, nothing happens.

Jsfiddle http://jsfiddle.net/LHTb5/1/

HTML

<video id="video1">
    <source id="mp4" src="https://s3.amazonaws.com/s3hub-1b3c58271cb3e0dfa49d60cae0ac8b86ade30aed6294bdb5fe682e2bf/HTML5/sintel_trailer-480.mp4" type="video/mp4"/>
</video>


<div id="new"></div>

Javascript

​$(document).ready(function(){
   $("#video1").appendTo($("#new"));
});​

---

Edit

Ok folks, there's been some confusion as to what's working, and what is not. Let me make it really easy.

http://jsfiddle.net/LHTb5/2/ <--- works

http://jsfiddle.net/ecbUP/ <---- doesn't work

Doesn't have anything to do with html, tags, or autoplay. It's just a dead simple thing that makes iPad not play. I'm just wondering why, or how to do an .appendTo or .detach and have it work.

Answer 1

There indeed seems to be a problem with moving the video tag. Rebuilding the entire video tag is an solution that can work (see fiddle)

$(document).ready(function(){
    var tt = $('<video/>', {
        id: 'video2',
        'autobuffer' : 'autobuffer',
        'controls'   : 'controls',
        'autoplay'   : 'autoplay',
        html         : $('<source />', {
            'src'    : 'http://media.w3.org/2010/05/sintel/trailer.mp4',
            'type'   : 'video/mp4'       
        })
    });
    $("#video1").remove();
    tt.appendTo($('#new'));
});​

I used hard-coded values for assembling the new video tag, but you can use .attr() on the video tag and the source to get the values from the tag.

I am aware this is not solving the problem with appendTo().

For completeness: Tested on iPad2 - iOS4.3.3 / iPod 5 - iOS6.0.1 / iPod 5 - iOS 7

EDIT: Updated video link in fiddle and tested on iOS7