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

<template lang="pug">
.block.gallery(v-if="block.hasOwnProperty('gallery')")
    p place-holder gallery {{ block.gallery }}

.block.embed(v-else-if="block[0].blockName == 'core/embed'")
    figure.youtube(v-if="block[0].attrs.providerNameSlug == 'youtube'").is-provider-youtube.wp-block-youtube
        p youtube: {{ fixYoutubeUrl(block[0].attrs.url) }}
        iframe(
            :src="fixYoutubeUrl(block[0].attrs.url)"
            title="YouTube video player"
            frameborder="0"
            allowfullscreen
        ).embed--player
    .not-youtube(v-else)
        p not youtube: {{ block[0].attrs }}

rblock(v-else-if="typeof block === 'object'" :block="block")
        
.block.single(v-else)
    .single--content(v-html="block")
</template>

<script>
import rblock from './block-recursive'

export default {
    components: { rblock },
    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 {
        }
    },
    computed: {
    }
}
</script>

<style lang="postcss">
.block
    &.embed
        min-height: 40vh
        > figure.youtube, > figure.youtube iframe
            height: 40vh
            width: 100%
</style>