Using JavaScript to wrap the HTML5 video element breaks video player in iOS

I am using JavaScript to wrap an HTML5 video player in a div for styling purposes. If the mark-up exists when the page loads, the player functions as it should. However if I apply the wrapper dynamically with JavaScript, the player goes black and its controls are inaccessible. I have tested applying various elements as wrappers, and it seems to happen with any block level element, but not inline elements. I can’t find any documentation on this bug or others who have encountered it via Google. Anyone have a workaround?

  • SVG in game development for map drawing with map movement
  • addEventListener for keydown on Canvas
  • Moving dynamically created grouped object within contained area? (html5canvas - fabric.js)
  • canvas drawImage doesn't draw images the first time
  • Fit image into div after rotation
  • How can i get the HTML5 Local storage values in server side
  • Disable select, allow copy/paste
  • HTML5 canvas ctx.fillText won't do line breaks?
  • Implementing fluid JS tile interface
  • HTML5 EventSource raises error even though request is 200 OK
  • HTML5 Video poster attribute in Safari and Chrome
  • Html5 Canvas method isPointInPath determines only the last object
  • One Solution collect form web for “Using JavaScript to wrap the HTML5 video element breaks video player in iOS”

    I see this was posted a long time ago & I ran into a similar issue.

    When a video is reparented (like it would be if you used a solution like slick, it reverts to 00:00 and pauses. Once reparented, you should be able to directly access the video via JS & invoke the play() method to get it started again.