Buttons
Fullscreen Button
This component is used to enter and exit fullscreen.
Usage
The <media-fullscreen-button>
component will toggle the fullscreen
state of media as it's pressed by dispatching a media-enter-fullscreen-request
, and media-exit-fullscreen-request
event to the player.
The aria-hidden='true'
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 <media-fullscreen-button>
component will fire a request to enter fullscreen on the player (i.e., <media-player>
). The request handler will naturally fallback to the current media provider if the native data-fullscreen API is not available.
You can specify that you only want to display the provider in fullscreen and not the entire media player like so:
By setting target
to provider
, the controller will only request fullscreen on the media provider, meaning your custom UI will not be displayed when in fullscreen.
Key Shortcuts
Keyboard shortcuts can be specified either through the global key shortcuts config, or on the component like so:
👉 See the aria-keyshortcuts
docs for more information.
Custom Icons
Here's an example containing a custom enter and exit icon:
Tooltips
Tooltips can be provided like so:
Styling
You can override the default styles with CSS like so:
Focus
CSS Variables
See the toggle button CSS variables for simple customization of the default button and tooltip styles.
Tailwind
The following is a headless example using Tailwind:
Tooltips
The following extends the example above with tooltips:
Component API
Props
Name | Type |
---|---|
|
MediaFullscreenRequestTarget
|
|
boolean
|
|
boolean
|
|
boolean
|
Events
Name | Type |
---|
Name | Description |
---|---|
|
Used to override the default enter fullscreen icon. |
|
Used to override the default exit fullscreen icon. |
CSS VarsLearn more about cssVars
Name | Type |
---|
CSS PartsLearn more about cssParts
Name | Description |
---|
Instance Props
Name | Type |
---|---|
|
readonly
boolean
|
Instance Methods
Name | Type |
---|