Some changes

src/views/main/PostCard.vue

@@ -0,0 +1,46 @@
+<template>
+
+
+  <div class=" shadow-lg rounded-lg max-w-sm">
+
+    <div class="h-48 object-cover bg-purple">
+
+      <v-img :src="props.post.banner"
+             v-if="!isHttpUrl">
+      </v-img>
+
+      <iframe v-if="isHttpUrl"
+              :src="props.post.banner"
+              title="YouTube video player"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+              referrerpolicy="strict-origin-when-cross-origin"
+              allowfullscreen>
+      </iframe>
+
+    </div>
+
+    <div class="text-lg font-bold">{{ props.post.title }}</div>
+    <div class="text-sm text-gray-500">{{ props.post.title }}</div>
+    <div class="text-base text-gray-700">{{ props.post.content }}</div>
+
+  </div>
+
+</template>
+
+<script setup>
+import {defineProps, computed} from 'vue';
+
+const isHttpUrl = computed(() => props.post.banner.startsWith('http'))
+
+const props = defineProps({
+  post: {
+    type: Object,
+    required: true,
+    validator: (post) => {
+      return 'banner' in post && 'image' in post && 'name' in post && 'title' in post && 'description' in post;
+    }
+  }
+});
+
+
+</script>