<template>
	<view class="video">
		<view class="video-container" :class="{ 'video-1': data.style == 1, 'video-2': data.style == 2, 'video-3': data.style == 3 }">
			<video class="video-container-box" :poster="data.image" :autoplay="data.autoplay" :loop="data.loop" :src="data.video.url"></video>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		data: {
			type: Object,
			default: function() {
				return {};
			}
		}
	});
	
</script>

<style lang="scss">
.video {
	.video-1 {
		height: 215px;
	}
	
	.video-2 {
		height: 280px;
	}
	
	.video-3 {
		height: 375px;
	}
	
	.video-container {
		position: relative;
		width: 100%;
		visibility: visible;
	}
	
	.video-container .video-container-box {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		height: 100%;
		background: #000;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
}
</style>