<media-fullscreen-button>

Button to toggle fullscreen viewing

Enter fullscreen

<media-fullscreen-button></media-fullscreen-button>

Exit fullscreen

<media-fullscreen-button media-is-fullscreen></media-fullscreen-button>

Alternate content

Enter Exit

<media-fullscreen-button media-paused>
  <span slot="enter">Enter</span>
  <span slot="exit">Exit</span>
</media-fullscreen-button>
<media-fullscreen-button media-is-fullscreen>
  <span slot="enter">Enter</span>
  <span slot="exit">Exit</span>
</media-fullscreen-button>

Attributes

None

Slots

Name	Default Type	Description
`enter`	`svg`	An element shown when the media is not in fullscreen and pressing the button will trigger entering fullscreen
`exit`	`svg`	An element shown when the media is in fullscreen and pressing the button will trigger exiting fullscreen

Example

<media-fullscreen-button>
  <svg slot="enter"><!-- your SVG --></svg>
  <svg slot="exit"><!-- your SVG --></svg>
</media-fullscreen-button>

Styling

See our styling docs