Windows firefox issue with embedded videos and css transform scale property

Question

The question says it all but to give some details, I have an html page with an embedded video in it and this page is inside an iframe. Iframe is also within a parent div which has been given this css property: transform: scale(0.8). In this case the video doesn't appear when you run it in Firefox on a Windows machine. I have searched everywhere on the internet and a lot of people had the same issue. I absolutely require scaling. I have even tried using transform: none on the embedded video to cancel out the scaling effect applied by its parent, but of no use. I know this is a browser issue after all, but is there any workaround possible?

Answer 1

Ok, I finally found out. I think only flash videos will work in this case. I was using different values for the type attribute in the object and embed tags

<object standby="Loading Microsoft� Windows� Media Player components..." type="application/x-oleobject" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsm p2inf.cab#Version=6,4,7,1112"> 
     <param name="fileName" value="<%= video_gallery.url[i].url %>"> 
     <param name="autoStart" value="false"> 
     <param name="showControls" value="true"> 
     <param name="AllowChangeDisplaySize" value="false"> 
     <param name="ClickToPlay" value="true"> 
     <embed id="embeddedPlayer" type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" src="<%= video_gallery.url[i].url %>" autoStart="false" width="<%=  $(window).width()%>" height="<%= $(window).height()-40 %>"  ></embed>
</object>

I just had to add wmode="transparent" and change the value of the type attribute to flash, like so:

<object standby="Loading Microsoft� Windows� Media Player components..." type="application/x-shockwave-flash" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsm p2inf.cab#Version=6,4,7,1112"> 
     <param name="fileName" value="<%= video_gallery.url[i].url %>"> 
     <param name="autoStart" value="false"> 
     <param name="wmode" value="transparent"/>
     <param name="showControls" value="true"> 
     <param name="AllowChangeDisplaySize" value="false"> 
     <param name="ClickToPlay" value="true"> 
     <embed controller="true" wmode="transparent" id="embeddedPlayer" type="application/x-shockwave-flash" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" src="<%= video_gallery.url[i].url %>" autoStart="false" width="<%=  $(window).width() %>" height="<%= $(window).height()-40 %>"  ></embed>
</object>

Notice the wmode and type attributes above. But I think you will need Quicktime plugin to run this.