UI
Fullscreen Button
This component is used to enter and exit fullscreen.
Import
Usage
The <vds-fullscreen-button>
component will toggle the fullscreen
state of media as it's pressed by dispatching a vds-enter-fullscreen-request
, and vds-exit-fullscreen-request
event to the media controller.
The hidden
attribute will be present on this element in the event fullscreen cannot be requested (not supported by environment or provider). The button's display
property will be set to none
, so it'll be removed from the layout; therefore, you should account for the button not being displayed in your design.
Fullscreen Target
By default, the <vds-fullscreen-button>
component will fire a request to enter fullscreen on the current media (i.e., <vds-media>
). The request handler will naturally fallback to the current media provider if the native Fullscreen API is not available.
You can specify that you only want to display the provider in fullscreen and not the entire media like so:
By setting target
to provider
, the controller will only request fullscreen on the media provider element, meaning your custom UI will not be displayed when in fullscreen.
Avoiding Double Controls (iOS)
The native media controls can not be hidden on iOS when in fullscreen mode even if the controls
property is not set. We recommend hiding them to avoid double controls by using the hide-ui
attribute on the vds-media
element.
Styling
Here's a simple styled <vds-fullscreen-button>
example containing a enter and exit icons: