feat: youtube embed plugin for my personal site

packages/sb-meme-generator/package.json

@@ -11,7 +11,7 @@
     "deploy": "yarn build && npx @storyblok/field-plugin-cli@latest deploy --dotEnvPath '../../.env'"
   },
   "dependencies": {
-    "@storyblok/field-plugin": "1.1.1",
+    "@storyblok/field-plugin": "^1.1.2",
     "vue": "^3.2.47"
   },
   "devDependencies": {

packages/sb-youtube-embed/package.json

@@ -11,7 +11,9 @@
     "deploy": "yarn build && npx @storyblok/field-plugin-cli@latest deploy --dotEnvPath '../../.env'"
   },
   "dependencies": {
-    "@storyblok/field-plugin": "1.1.1",
+    "@storyblok/design-system": "^3.25.0",
+    "@storyblok/field-plugin": "^1.1.2",
+    "lite-youtube-embed": "^0.3.2",
     "vue": "^3.2.47"
   },
   "devDependencies": {

packages/sb-youtube-embed/src/App.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import FieldPlugin from './components/FieldPlugin.vue'
-import FieldPluginExample from './components/FieldPluginExample/index.vue'
+import YoutubeVideoEmbed from './components/YoutubeVideoEmbed/index.vue'
 </script>
 
 <template>
-  <FieldPluginExample />
+  <YoutubeVideoEmbed />
 </template>

packages/sb-youtube-embed/src/components/YoutubeVideoEmbed/VideoEmbed.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import 'lite-youtube-embed'
+import 'lite-youtube-embed/src/lite-yt-embed.css'
+
+defineProps<{ videoId: string }>()
+</script>
+
+<template>
+  <lite-youtube
+    :key="videoId"
+    :videoid="videoId"
+    playlabel="Play this video"
+  />
+</template>
+
+<style scoped>
+lite-youtube {
+  aspect-ratio: 16/9;
+  border-radius: 8px;
+}
+lite-youtube::before {
+  content: none;
+}
+lite-youtube > .lty-playbtn {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 68 48"><path fill="%23A21CAF" fill-opacity="0.8" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path d="M 45,24 27,14 27,34" fill="%23fff"></path></svg>');
+}
+</style>