:sparkles: reformatting youtube urls for embed

vue-theme/src/components/content-block/block.vue

@@ -3,15 +3,14 @@
     p place-holder gallery {{ block.gallery }}
 
 .block.embed(v-else-if="block[0].blockName == 'core/embed'")
-    .youtube(v-if="block[0].attrs.providerNameSlug == 'youtube'")
-        p youtube: {{ block[0].attrs.url }}
+    figure.youtube(v-if="block[0].attrs.providerNameSlug == 'youtube'").is-provider-youtube.wp-block-youtube
+        p youtube: {{ fixYoutubeUrl(block[0].attrs.url) }}
         iframe(
-            :src="block[0].attrs.url"
+            :src="fixYoutubeUrl(block[0].attrs.url)"
             title="YouTube video player"
             frameborder="0"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
             allowfullscreen
-        )
+        ).embed--player
     .not-youtube(v-else)
         p not youtube: {{ block[0].attrs }}
 
@@ -29,6 +28,13 @@ export default {
     props: {
         block: { required: true }
     },
+    methods: {
+        fixYoutubeUrl(url) {
+            const videoUid = url.split('https://youtu.be/').filter(pieces => pieces.length > 0)[0]
+
+            return `https://www.youtube.com/embed/${videoUid}`
+        }
+    },
     data() {
         return {
         }
@@ -40,4 +46,9 @@ export default {
 
 <style lang="postcss">
 .block
+    &.embed
+        min-height: 40vh
+        > figure.youtube, > figure.youtube iframe
+            height: 40vh
+            width: 100%
 </style>