<template>

        <!--if (strpos($video, "{") !== false) {-->
            <!--$video = json_decode($video);-->
            <!--$video_url = $video->url;-->
    <!---->
            <!--$video_element = WHAT IS BEING USED BELOW-->                    <!-- Keeping this just in case -->

        <!--} else {-->
            <!--$video_element =-->
            <!--<video v-if="properties['Background Video'].value" playsinline autoplay $loop muted>-->
                <!--<source :src="properties['Background Video'].value" type="video/mp4">-->
            <!--</video>-->
        <!--}-->
    <div :id="rowId" :class="rowClasses" :style="backgroundImageStyle">
        <div class="video_only_hero">
            <div v-if="properties['Video'].value" class="video-container">
                <video playsinline autoplay :loop="properties['Loop'].value" muted>
                    <source :src="properties['Video'].value" type="video/mp4">
                </video>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        name: "BuildableVideoOnlyHero",
        props: ['componentData', 'rowClasses', 'rowIndex', 'rowId', 'backgroundImageStyle'],
        data() {
            return JSON.parse(this.componentData);
        }
    }
</script>

<style scoped>

</style>