<template>
    <section v-if="video" class="strapi-embedded-video">
        <div class="wrapper" v-html="video.oembed.html" />
    </section>
</template>

<script setup>
const props = defineProps({
    video: Object,
})
</script>

<style lang="scss">
.strapi-embedded-video {
    .wrapper {
        width: 100%;
        aspect-ratio: 16 / 9;
        position: relative;
        border-radius: desktop-vw(4px);
        overflow: hidden;

        iframe {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
    }

    @include mobile() {
        .wrapper {
            border-radius: mobile-vw(8px);
        }
    }
}
</style>
