pinafore/routes/_components/dialog/VideoDialog.html

38 lines
737 B
HTML
Raw Normal View History

2018-04-05 05:33:17 +02:00
<ModalDialog
:label
:shown
background="var(--muted-modal-bg)"
muted="true"
className="video-modal-dialog"
on:destroyDialog="destroy()"
2018-04-01 03:46:44 +02:00
>
<video poster="{{poster}}"
src="{{src}}"
width="{{width}}"
height="{{height}}"
2018-01-21 19:32:18 +01:00
aria-label="Video: {{description || ''}}"
controls
/>
</ModalDialog>
<style>
2018-04-01 03:46:44 +02:00
:global(.video-modal-dialog video) {
object-fit: contain;
max-width: calc(100vw - 20px);
2018-02-23 05:04:19 +01:00
max-height: calc(100% - 20px);
overflow: hidden;
}
</style>
<script>
2018-02-05 18:43:45 +01:00
import ModalDialog from './ModalDialog.html'
export default {
components: {
ModalDialog
},
methods: {
async show() {
this.set({shown: true})
}
}
}
</script>