Search code examples
ipadhtml5-videoscalevisibility

Scaled (or toggle display) html5 video on ipad not Visible

<video  width="910" height="544" controls>
    <source src="resources/videos/movie1.mp4" type="video/mp4">
</video>

I have an HTML5 video that I need to be hidden initially so I tried a webkit transition on it to scale it up:

vidWrapper {
    -webkit-transition: all .5s ease-in-out;
    -webkit-transform: scale(0); 
} 

    .vidWrapper.active {
        -webkit-transform: scale(1);

Also here is my .js code that I use to scale up the video. I had to use a timeout because after displaying the video, the dom seems to need a chance to catch before I can scale it up:

setTimeout(function(){
                 debugger;
                 scope.m_vidWrapper.addCls('active');
            },200,scope)

**NOTE if I remove the setTimeout, and just call scope.m_vidWrapper.addCls('active'); to start the transition, the video will just appear. and not scale up from 0 to 1 nicely

, this will work on Chrome and Safari but not ipad . I also tried toggling the display from none to block and it still won't show up. I have seen where if I leave the page I'm trying to display the video will flash visible , so it seems its there but maybe the DOM has to be refreshed somehow after I scale up?

Solution

  • As a workaround I ended up setting the initial scale value to 0.1 instead of 0 i.e: -webkit-transform: scale(0.1);