<video> element sizing behavior: support for 'object-fit' and 'overflow' styles about cordova-plugin-iosrtc HOT 10 CLOSED

This is the outcome of the discussion in aoberoi/cordova-plugin-opentokjs#5

from cordova-plugin-iosrtc.

Good test case: http://jsbin.com/yaheka/edit?html,css,js,output

from cordova-plugin-iosrtc.

Excellent report, and a "must have" for the plugin. I will do my best effort on this subject next week once I get some spare time.

from cordova-plugin-iosrtc.

Guys I'm working on this and can already detect the CSS "object-fit: cover" but cannot figure out how to translate that at the native UIView level.

I've open a thread in discuss-webrtc: https://groups.google.com/forum/#!topic/discuss-webrtc/FnSOHqvFbEw

from cordova-plugin-iosrtc.

All the values of object-fit have been implemented. I hope we do not need to also observe parent's overflow: hidden.

from cordova-plugin-iosrtc.

@ibc: wow, super fast! thanks for that. i'm working on some other problems in the layout for the opentok layer, but i'll pull in the latest the dependency soon. i'll report back my results.

in terms of overflow: hidden, i do think its a very common usage, but i can see that the implementation for this will be more complex. maybe create another issue to track interest from anyone else who wants to see that implemented? that could help inform whether its worth the effort.

from cordova-plugin-iosrtc.

@aoberoi since you mention usage of object-fit: cover (already implemented in the cordova-plugin-iosrtc), are you aware of a related bug in Chrome?:

• https://code.google.com/p/chromium/issues/detail?id=400829
• http://jsfiddle.net/73dyw/4/

Regarding the overflow: hidden in parent element(s): I anticipate that the logic for this would be really hard. Currently I use two UIView in the plugin, one which fills the video element (black background) and another one that holds the video. Having to show just a fragment of the video (and also a fragment of the video element) would require yet another UIView and lot of complexity to properly clip and position the views.

May you please share an usage example so I can understand the goal better?

from cordova-plugin-iosrtc.

@ibc i was not aware of that chrome bug, but i have starred it. thanks for pointing that out. i'll try to get more of my team members to star it as well.

if the expected behavior is as they describe, then we will not need overflow: hidden on the parent elements in order to achieve the desired outcome.

from cordova-plugin-iosrtc.

It is clearly a bug in Chrome. Just open the same link in Firefox (it would also work in Safari if you replace the OGG video with any MP4 video or other format supported by Safari).

Basically the cordova-plugin-iosrtc behaves better than Chrome in regards to the CSS object-fit property XD.

from cordova-plugin-iosrtc.

from cordova-plugin-iosrtc.