⚡ (video) Allow changing video height when resolved to an iframe

packages/bot-engine/parseBubbleBlock.ts

@@ -60,7 +60,13 @@ export const parseBubbleBlock = (
       const parsedContent = deepParseVariables(variables)(block.content)
       return {
         ...block,
-        content: parsedContent.url ? parseVideoUrl(parsedContent.url) : {},
+        content: {
+          ...(parsedContent.url ? parseVideoUrl(parsedContent.url) : {}),
+          height:
+            typeof parsedContent.height === 'string'
+              ? parseFloat(parsedContent.height)
+              : parsedContent.height,
+        },
       }
     }
     default:

packages/embeds/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx

@@ -39,9 +39,9 @@ export const VideoBubble = (props: Props) => {
   })
 
   return (
-    <div class="flex flex-col animate-fade-in" ref={ref}>
+    <div class="flex flex-col w-full animate-fade-in" ref={ref}>
       <div class="flex w-full items-center">
-        <div class="flex relative z-10 items-start typebot-host-bubble overflow-hidden">
+        <div class="flex relative z-10 items-start typebot-host-bubble overflow-hidden w-full">
           <div
             class="flex items-center absolute px-4 py-2 bubble-typing z-10 "
             style={{
@@ -86,7 +86,11 @@ export const VideoBubble = (props: Props) => {
                   isTyping() ? 'opacity-0' : 'opacity-100 p-4'
                 )}
                 style={{
-                  height: isTyping() ? (isMobile() ? '32px' : '36px') : '200px',
+                  height: isTyping()
+                    ? isMobile()
+                      ? '32px'
+                      : '36px'
+                    : `${props.content.height ?? '400'}px`,
                 }}
               >
                 <iframe

packages/schemas/features/blocks/bubbles/video/schemas.ts

@@ -2,11 +2,13 @@ import { z } from 'zod'
 import { blockBaseSchema } from '../../baseSchemas'
 import { BubbleBlockType } from '../enums'
 import { VideoBubbleContentType } from './enums'
+import { variableStringSchema } from '../../../utils'
 
 export const videoBubbleContentSchema = z.object({
   url: z.string().optional(),
   id: z.string().optional(),
   type: z.nativeEnum(VideoBubbleContentType).optional(),
+  height: z.number().or(variableStringSchema).optional(),
 })
 
 export const videoBubbleBlockSchema = blockBaseSchema.merge(