1. Buttons
  2. PIP Button

Buttons

PIP Button

This component is used to enter and exit picture-in-picture mode.

Usage

The <media-pip-button> component will toggle the picture-in-picture (PIP) mode of media as it's pressed by dispatching a media-enter-pip-request, and media-exit-pip-request event to the player.

          
        
DANGER

The aria-hidden='true' attribute will be present on this element in the event PIP 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.

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:

css
        media-pip-button {
  color: pink;
  transition: opacity 0.2s ease-in;
}

/* Apply styles when media is in PIP mode. */
media-pip-button[data-pip] {
}

/* Apply styles when media is _not_ in PIP mode. */
media-pip-button:not([data-pip]) {
}

/* Apply styles when pip is not supported. */
media-pip-button[aria-hidden='true'] {
}

/* Style default icons. */
media-pip-button svg[slot='enter'] {
}
media-pip-button svg[slot='exit'] {
}

      

Focus

css
        media-pip-button {
  /* box shadow */
  --media-focus-ring: 0 0 0 4px rgb(78 156 246);
}

/* Apply styles when focused via keyboard. */
media-pip-button[data-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

disabled

boolean

defaultAppearance

boolean

defaultPressed

boolean

Events

Name Type
Name Description

enter

Used to override the default enter PIP icon.

exit

Used to override the default exit PIP icon.

Name Type
Name Description

Instance Props

Name Type

pressed

readonly boolean

Instance Methods

Name Type