feat: working youtube embeds from custom field

vue-theme/src/components/hero.vue

@@ -1,7 +1,14 @@
 <template lang="pug">
 .hero.f-col(v-if="showHero")
-    h3(v-if="heroText") {{ heroText }}
-    button(v-if="showPlaybutton") play
+    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>
@@ -10,21 +17,28 @@ import { mapState } from 'vuex'
 export default {
     data() {
         return {
-            heroHeight: 0
+            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()
         }
     },
-    computed: mapState({
-        showHero: state => state.hero.url,
-        heroText: state => state.hero.text,
-        showPlaybutton: state => state.hero.playbutton,
-    }),
     methods: {
         onResize() {
-            this.heroHeight = this.$el.offsetWidth / 2.33
+            this.heroHeight = this.$el.offsetWidth / 1.8
         }
     },
     mounted() {
-        this.heroHeight = this.$el.offsetWidth / 2.33
+        this.heroHeight = this.$el.offsetWidth / 1.8
         this.$nextTick(() => { window.addEventListener('resize', this.onResize) })
     },
     watch: {
@@ -42,6 +56,9 @@ export default {
 <style lang="postcss">
 .hero
     background-color: rebeccapurple
-    min-height: 30%
+    min-height: 35%
     width: 100%
+    .embedded
+        height: 100%
+        width: 100%
 </style>