add quick iframe option for luma embeds (#193)

Author: bryantgillespie

components/Block/Media.vue

@@ -29,7 +29,7 @@ const { data: block } = useAsyncData(props.uuid, () =>
 	<BaseMedia
 		v-if="block"
 		class="block-media"
-		:aspect="block.type === 'arcade' ? 'auto' : (block.aspect_ratio ?? undefined)"
+		:aspect="block.type === 'arcade' || block.type === 'iframe' ? 'auto' : (block.aspect_ratio ?? undefined)"
 		:border="block.border"
 		:radius="block.border_radius"
 		:caption="block.caption ?? undefined"
@@ -65,6 +65,8 @@ const { data: block } = useAsyncData(props.uuid, () =>
 			/>
 		</template>
 
+		<div v-else-if="block.type === 'iframe' && block.embed" v-html="block.embed" class="iframe" />
+
 		<img v-else-if="block.external_image_url" class="media" :src="block.external_image_url" alt="" loading="lazy" />
 	</BaseMedia>
 </template>
@@ -105,4 +107,17 @@ const { data: block } = useAsyncData(props.uuid, () =>
 		display: none;
 	}
 }
+
+.iframe {
+	aspect-ratio: 9 / 16;
+	iframe {
+		width: 100%;
+		height: 100%;
+	}
+	@container (width > 30rem) {
+		width: 100%;
+		aspect-ratio: 16 / 10;
+		max-height: 450px;
+	}
+}
 </style>

types/schema/blocks/block-media.ts

@@ -3,7 +3,7 @@ import type { Video } from '../content/video.js';
 
 export interface BlockMedia {
 	id: string;
-	type: 'video' | 'image' | 'arcade' | 'external-image' | null;
+	type: 'video' | 'image' | 'arcade' | 'external-image' | 'iframe' | null;
 	image: string | File | null;
 	video: string | Video | null;
 	embed: string | null;