Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Video Scaling Issue in Firefox

Go to solution Solved by Jonathan,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi guys,

I am experiencing an issue in Firefox when I am scaling up a video container div. For some reason the video element inside doesn't seem to be scaling with it. Anyone having an idea as to how to resolve it? You can see the video player inside not matching the dimensions set. Sometimes it works, but as you refresh it doesn't.



See the Pen aa9116b990a89d3d694ffa48a14902b5 by dada78 (@dada78) on CodePen

Link to comment
Share on other sites

Hi dada78  :)


how about this : 


pls remove controls="controls" from your markup and try this :

openVideo.to("#vid1-holder",1,{scale:1,opacity:1}).set("#video1",{attr:{controls:1}}); // or controls:"controls"
  • Like 3
Link to comment
Share on other sites

Awesome Diaco!

That does the trick, but it seems a bit abrupt when the videoplayer appears in Firefox, and adding a fade up (opacity) to #video1 doesn't seem to help either, it just appears after it has finished the scale up. Do you know how to control that by any chance?

And in Firefox it also doesn't look as if the initial scale (0.5) is honored compared to Chrome...


Thanks so much for the quick response!

Link to comment
Share on other sites

  • Solution

to add to Diaco's great advice:


Why not just use GSAP to set the initial scale and opacity (autoAlpha) in your [docs id=js.TweenMax.set()" linktext="set()] .. and comment out your scale in the CSS. .. also i added transformStyle:"preserve-3d" ..


try this:

See the Pen vNBENa by jonathan (@jonathan) on CodePen


openVideo.set("#vid1-holder", {scale:0.5, autoAlpha:0, transformStyle:"preserve-3d", zIndex:30, overwrite:"all"})

As a rule of thumb, Make sure to always add a top/bottom and left/right property and value when using position:absolute .. to help with the jump after scaling

#video1, #video2{
  top:0; /* add this for no jump after scale */
  left:0; /* add this for no jump after scale */
  width: 300px;

Firefox will jump the inner child because your not passing those default values.. in this case top: 0 and left: 0 .. also since we are using autoAlpha 0  you can add visibility:hidden on your <video> tags parent


does that help? :)

  • Like 3
Link to comment
Share on other sites

Thanks Jonathan!


Good reminder about adding the preserve 3d property. I think you meant to say "transformStyle" though? Also great tip about setting the position!

Thanks so much!

Link to comment
Share on other sites

Thanks dada78.. sometimes i think faster than my nubs can type :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.