pinafore/routes/_components/dialog/VideoDialog.html
2018-03-20 21:26:53 -07:00

31 lines
658 B
HTML

<ModalDialog :label :shown background="var(--muted-modal-bg)" muted="true">
<video poster="{{poster}}"
src="{{src}}"
width="{{width}}"
height="{{height}}"
aria-label="Video: {{description || ''}}"
controls
/>
</ModalDialog>
<style>
:global(#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'
export default {
components: {
ModalDialog
},
methods: {
async show() {
this.set({shown: true})
}
}
}
</script>