vue-wp/vue-theme/src/components/hero.vue

<template lang="pug">
.hero.f-col(v-if="showHero")
    iframe(
        v-if="isPlaying"
        :src="`https://www.youtube.com/embed/${heroIdFromUrl}?autoplay=1`"
        frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope"
        allowfullscreen
    ).embedded
    .blank.f-col(v-else)
        h3(v-if="heroText") {{ heroText }}
        button(v-if="showPlaybutton" @click="isPlaying = true") play
</template>

<script>
import { mapState } from 'vuex'

export default {
    data() {
        return {
            heroHeight: 0,
            isPlaying: false
        }
    },
    computed: {
        ...mapState({
            showHero: state => state.hero.url,
            heroText: state => state.hero.text,
            showPlaybutton: state => state.hero.playbutton,
        }),
        heroIdFromUrl() {
            const url = this.showHero.split('/')
            return url.pop()
        }
    },
    methods: {
        onResize() {
            this.heroHeight = this.$el.offsetWidth / 1.8
        }
    },
    mounted() {
        this.heroHeight = this.$el.offsetWidth / 1.8
        this.$nextTick(() => { window.addEventListener('resize', this.onResize) })
    },
    watch: {
        heroHeight() {
            Object.assign(this.$el.style, {height: this.heroHeight + 'px'})
        }
    },
    beforeUnmount() {
        window.removeEventListener('resize', this.onResize)
    },
    
}
</script>

<style lang="postcss">
.hero
    background-color: rebeccapurple
    min-height: 35%
    width: 100%
    .embedded
        height: 100%
        width: 100%
</style>