Fix positioning video elements using z-index #179
Conversation
|
/cc @ibc please review this when you can. |
|
@ibc gentle reminder :-) 🙏 |
| self.elementView.userInteractionEnabled = false | ||
| self.elementView.hidden = true | ||
| self.elementView.backgroundColor = UIColor.blackColor() | ||
| self.elementView.backgroundColor = UIColor.clearColor() |
There was a problem hiding this comment.
Why don't you let the video view to be black when no video is rendered (as a common video element)?
There was a problem hiding this comment.
I thought of it but was a bit undecided. I can change it back. It actually looks weird if the video doesn't cover the entire surface and object-fit is not used. 👍
There was a problem hiding this comment.
What do you mean with "cover the entire surface"? What does "surface" stand for?
There was a problem hiding this comment.
I mean that if the webview has a transparent background and the video element doesn't cover it completely, you'd see the (transparent) background, which is weird whitish. I agree it's better to have black bars on the video, or if the user wants they can set object-fit to get rid of them.
|
It looks very nice and seems to satisfy a proper set of requirements. Please correct me if I'm wrong:
Right? Also, some questions made inline. |
Yes on all accounts.
I'll fixup the video background color in a sec. |
Instead of adding the video element view as a su-view of the WebView, add it as a subview of it's superview. This puts the WebView and the video views at the same level (aka, they are siblings) and the layer's zPosition is considered amongst siblings. Since an ASCII diagram is worth a thousand images, this is the layout before this patch: +-------------------------------+ | superview | +-------------------------------+ +-------------------------------+ | WebView | +-------------------------------+ +--------------+ +--------------+ | videoView1 | | videoView2 | +--------------+ +--------------+ And after: +---------------------------------------+ | superview | +---------------------------------------+ +---------+ +------------+ +------------+ | WebView | | videoView1 | | videoView2 | +---------+ +------------+ +------------+ This makes it possible to order videos "behind" the WebView, which this patch makes transparent, and thus have HTML elements on top of the video views. Props to @1N50MN14 for writing a first version of (what became) this patch.
|
Force-pushed. |
|
Looks great. So.... let's merge it! |
|
3.0.1 is out. Thanks guys. |
|
Hey, I wondered if you could help me understand how to use this correctly as I am struggling to get HTML buttons over top of the video. I have a container with a z-index of 100 that's absolute positioned (and is set to 'display:none' until needed), inside a video container that's absolute positioned, inside that a local video with z-index of 110 and remote video with 105, then an absolute positioned button container with a z-index higher than the videos but is behind them. Are you able to offer any guidance? Thanks. |
|
@MonsterKiller you need to make the div containing the video have a higher z-index. Then make its background transparent. Effectively you need to position the browser view on top of the video view (they are different native views) and make the webview transparent so the video is seen through it, but the buttons will be painted on top. |
|
@MonsterKiller may you please start a thread in the public mailing list? Please, don't comment issues on an already merged PR. |
Instead of adding the video element view as a su-view of the WebView,
add it as a subview of it's superview. This puts the WebView and the
video views at the same level (aka, they are siblings) and the layer's
zPosition is considered amongst siblings.
Since an ASCII diagram is worth a thousand images, this is the layout
before this patch:
And after:
This makes it possible to order videos "behind" the WebView, which this
patch makes transparent, and thus have HTML elements on top of the video
views.
Props to @1N50MN14 for writing a first version of (what became) this patch.
Supersedes: #98