pinafore/routes/_components/dialog/components/VideoDialog.html

<ModalDialog
  {id}
  {label}
  background="var(--muted-modal-bg)"
  muted="true"
  className="video-modal-dialog"
  on:close="onClose()"
>
  <video {poster}
         {src}
         {width}
         {height}
         aria-label="Video: {description || ''}"
         controls
         ref:video
  />
</ModalDialog>
<style>
  :global(.video-modal-dialog video) {
    object-fit: contain;
    max-width: calc(100vw - 20px);
    max-height: calc(100% - 20px);
    overflow: hidden;
  }
</style>
<script>
  import ModalDialog from './ModalDialog.html'
  import { show } from '../helpers/showDialog'
  import { oncreate } from '../helpers/onCreateDialog'

  export default {
    oncreate,
    components: {
      ModalDialog
    },
    methods: {
      show,
      onClose () {
        if (this.refs.video && !this.refs.video.paused) {
          this.refs.video.pause()
        }
      }
    }
  }
</script>