I want to apply mirror effect on my HTML 5 Video. I did this by applying this CSS
transform: scale(-1, 1);
filter: FlipH;
It's working on desktop and web, but it's not working on mobiles (when we enter into full screen).
According to #PhonicUK in this question
here's the solution most used browsers:
#videoElement
{
transform: rotateY(180deg);
-webkit-transform:rotateY(180deg); /* Safari and Chrome */
-moz-transform:rotateY(180deg); /* Firefox */
}
You can use rotateY property instead of scale for this:
transform:rotateY(180deg);
I think you should make it compatible for all web browsers. Try something like this:
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1); -o-transform: scale(-1, 1);
transform: scale(-1, 1); filter: FlipH;
See filter property compatibilities: https://caniuse.com/#feat=css-filters
If you’re able to then you should flip the actual source video and save a new version rather than trying this in code. I don’t know what performance hit this has for mobiles and I think full screen mode is ‘outside’ the browser’s context and varies per device. If you can’t edit the source video then heopfully the other answer can help.
Related
This doesn't work with older browsers like IE
transform : scale(1,1.3); -moz-transform: scale(1,1.3); -o-transform: scale(1,1.3); -webkit-transform: scale(1,1.3);
Any workaround to make it work with older versions ?
This doesn't work with older browsers like IE
This is wrong. It depends on which version of IE you are suporting.
There is the -ms- prefix for IE9. IE 10+ can perfectly run css3 2D transform nativelly, using transform property.
//IE 9
-ms-transform: scale(1, 1.3);
//IE 10+
transform: scale(1, 1.3);
So you can make almost all 2D tranforms into IE9+. Info via Can I Use
But, of course, if you need to suport lower versions, like IE8, you have some workarounds, like this one.
I have built this awesome css only loader and everything is working fine except in Internet Explorer. For some reason, IE feels as if it needs to constantly shake. When it comes down to it all I'm doing is a simple keframe animation like this:
#keyframes loading
0%
transform: scale(1)
50%
transform: scale(1.2)
100%
transform: scale(1)
Here is my CodePen for the loader: http://codepen.io/MrGrigri/pen/zxWQdb
Also, here is the blog associated with it: http://codepen.io/MrGrigri/blog/responsive-loader/
In all of the other browsers its working like a champ...just not IE.
I'm testing it in IE Version 11.0.16 on Windows 8.1
Thanks for the help
I was having this same problem in IE 11, I could realize that if I reduce the time of the animation could works (ex. 0.3s). But that wasn't a solution for me.
While I was reading How to fix shaking CSS transitions in Firefox I found one solution (for Firefox), and I thought that could work the same concept for IE.
The idea is rotate (the minimum possible) the div or image while your making the scale. Just like this:
#keyframes loading
0%
transform: scale(1);
50%
transform: scale(1.2) rotate(0.02deg);
100%
transform: scale(1);
I made this trick and works in IE 11.
Using the CSS transform() property (and the -moz-, -webkit-, etc verisons), it's easy to rotate an HTML 5 video:
video {
transform:rotate(90deg);
}
However, this rotates the controls along with the video. Is there any way to keep the video itself rotated without also rotating the controls?
Ok I see, you're using the native video controls. What you'll need to do is build custom controls if you want to style them separately. Here's a good tutorial on how to do that http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos. Hope this helps
Ok, For next rotate control.
Add this in Css:
video::-webkit-media-controls {
transform: scale(-1, 1);
-webkit-transform:scale(-1, 1); /* Safari and Chrome */
-moz-transform:scale(-1, 1); /* Firefox */
}
video::-webkit-media-controls-enclosure {
transform: scale(-1, 1);
-webkit-transform:scale(-1, 1); /* Safari and Chrome */
-moz-transform:scale(-1, 1); /* Firefox */
}
We want to resize the "like" button as we have complaints from Users it's too small on smartphones. We are using HTML5 code. We cannot use iframe as we need to determine user has clicked on "like" button for out social wifi application.
As I mentioned we have constant complaints that the "like" button is too small on smartphones . . . these are users not us saying this.
You can use CSS3 transform to scale the Facebook button:
FIDDLE
#fblike {
transform: scale(2);
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
}
Note: you can use a float for scale, e.g: 1.5 = 150% of the original size.
I would like to be able to use calc() with transform:translateX in my CSS.
E.g.,
#myDiv {
-webkit-transform: translateX(calc(100% - 50px));
-moz-transform: translateX(calc(100% - 50px));
transform: translateX(calc(100% - 50px));
}
While this works perfectly in Chrome, Safari, and Firefox - it does not work in IE10 or IE11.
You can see a simple example here: http://jsfiddle.net/SL2mk/9/
Is this impossible? Is it a bug in IE, or is calc() not supposed to work in this context?
For what it's worth - I read here that you can "stack" translateX to acheive the same effect, and my testing seems to confirm this. I.e.,
#div {
transform: translateX(calc(100% - 50px));
}
is the same as:
#div {
transform: translateX(100%) translateX(-50px);
}
But I don't know if this is the best, most reliable, and future-proof way to do this.
I also know that it's possible to use left instead of translateX, but the latter is much smoother when used with transitions, since, as I understand it, it forces the use of the GPU to handle the animation.
This:
transform: translateX(100%) translateX(-50px);
gets compiled at parse time, but calc expression here :
transform: translateX(calc(100% - 50px));
has to be interpreted each time when browser needs that value. Result of the expression can be cached but I wouldn't rely on browsers to use such kind of optimizations.
So first one is better in the sense that a) it works now, b) is effective and c) it will work in future until the spec will be in effect.
I just use them both with -ms- browser selector. It works perfectly.
-ms-transform: translateX(100%) translateX(-50px); /* IE 11 */
transform: translateX(calc(100% - 50px));