42 lines
920 B
Vue
42 lines
920 B
Vue
<script setup lang="ts">
|
|
const props = withDefaults(defineProps<{
|
|
video: string,
|
|
poster?: string,
|
|
controls?: boolean | string,
|
|
autoplay?: boolean | string,
|
|
loop?: boolean | string,
|
|
muted?: boolean | string,
|
|
}>(), {
|
|
poster: undefined,
|
|
controls: true,
|
|
autoplay: false,
|
|
loop: false,
|
|
muted: false,
|
|
})
|
|
|
|
const parseBool = (value?: boolean | string) => value === true || value === "true"
|
|
</script>
|
|
|
|
<template>
|
|
<video
|
|
class="object-contain sm:max-w-[85%] max-w-[95%] m-auto"
|
|
:src="props.video"
|
|
:poster="props.poster"
|
|
:controls="parseBool(props.controls)"
|
|
:autoplay="parseBool(props.autoplay)"
|
|
:loop="parseBool(props.loop)"
|
|
:muted="parseBool(props.muted)"
|
|
preload="metadata"
|
|
playsinline
|
|
/>
|
|
<div class="ml-auto mr-auto mt-2 w-fit max-w-[80%] slot">
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="css" scoped>
|
|
.slot > * {
|
|
font-size: 16px;
|
|
}
|
|
</style>
|