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

38 lines
725 B
HTML

<ModalDialog
:id
:label
background="var(--muted-modal-bg)"
muted="true"
className="video-modal-dialog"
>
<video :poster
:src
:width
:height
aria-label="Video: {{description || ''}}"
controls
/>
</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
}
}
</script>