<template>
    <div
        class="c2-video"
        :style="cssVars"
    >
        <iframe
            :title="videoTitle"
            :src="videoSrc"
            frameborder="0"
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
        >
        </iframe>
    </div>
</template>

<script>
    export default {
        name: 'C2Video',
        props: {
            aspectRatio: {
                type: String,
                default: '16/9'
            },
            videoSrc: {
                type: String,
                required: true
            },
            videoTitle: {
                type: String,
                default: null
            }
        },
        computed: {
            cssVars () {
                return {
                    '--c2VideoAspectRatio': this.aspectRatio
                }
            }
        }
    }
</script>

<style lang="scss">
    .c2-video {
        position: relative;
        aspect-ratio: var(--c2VideoAspectRatio);

        iframe {
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
        }
    }
</style>
