diff --git a/packages/vidstack/player/styles/default/layouts/video.css b/packages/vidstack/player/styles/default/layouts/video.css index 115941f8f..b06981604 100644 --- a/packages/vidstack/player/styles/default/layouts/video.css +++ b/packages/vidstack/player/styles/default/layouts/video.css @@ -435,35 +435,14 @@ } @media (orientation: portrait) { - :where([data-iphone][data-fullscreen] .vds-video-layout .vds-controls-group:first-child) { - margin-top: 48px; - padding-inline: 4px; - } - - :where([data-iphone][data-fullscreen] .vds-video-layout .vds-controls-group:nth-last-child(2)) { - padding-inline: 8px; - } - - :where([data-iphone][data-fullscreen] .vds-video-layout .vds-controls-group:last-child) { - margin-inline: 8px; - margin-bottom: 52px; - } - :where([data-fullscreen] .vds-video-layout .vds-captions) { - bottom: 30vh; + bottom: 30lvh; + bottom: 10dvh; } } @media (orientation: landscape) { - :where([data-iphone][data-fullscreen]:not([data-controls]) .vds-video-layout .vds-captions) { - bottom: 32px; - } - :where([data-fullscreen] .vds-video-layout .vds-controls-group:nth-last-child(2)) { margin-bottom: -12px; } - - :where([data-iphone][data-fullscreen] .vds-video-layout .vds-controls-group:last-child) { - margin-bottom: 12px; - } } diff --git a/packages/vidstack/src/components/ui/tooltip/tooltip.ts b/packages/vidstack/src/components/ui/tooltip/tooltip.ts index 6c7eea128..53ea43863 100644 --- a/packages/vidstack/src/components/ui/tooltip/tooltip.ts +++ b/packages/vidstack/src/components/ui/tooltip/tooltip.ts @@ -37,10 +37,13 @@ export class Tooltip extends Component { _content: this._content, _showDelay: showDelay, _listen(trigger, show, hide) { + listenEvent(trigger, 'touchstart', (e) => e.preventDefault()); + listenEvent(trigger, 'focus', show); - listenEvent(trigger, 'pointerenter', show); listenEvent(trigger, 'blur', hide); - listenEvent(trigger, 'pointerleave', hide); + + listenEvent(trigger, 'mouseenter', show); + listenEvent(trigger, 'mouseleave', hide); }, _onChange: this._onShowingChange.bind(this), });