diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json
index d350c5d77..5d321f59e 100644
--- a/packages/embeds/js/package.json
+++ b/packages/embeds/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",
diff --git a/packages/embeds/js/src/assets/index.css b/packages/embeds/js/src/assets/index.css
index 46cbf9a29..c9a31b743 100644
--- a/packages/embeds/js/src/assets/index.css
+++ b/packages/embeds/js/src/assets/index.css
@@ -76,10 +76,10 @@
 
 @keyframes chatBubbles {
   0% {
-    transform: translateY(0);
+    transform: translateY(2.5);
   }
   50% {
-    transform: translateY(-5px);
+    transform: translateY(-2.5px);
   }
   100% {
     transform: translateY(0);
diff --git a/packages/embeds/js/src/features/blocks/bubbles/audio/components/AudioBubble.tsx b/packages/embeds/js/src/features/blocks/bubbles/audio/components/AudioBubble.tsx
index e1fd72a45..f9e5616a7 100644
--- a/packages/embeds/js/src/features/blocks/bubbles/audio/components/AudioBubble.tsx
+++ b/packages/embeds/js/src/features/blocks/bubbles/audio/components/AudioBubble.tsx
@@ -1,4 +1,5 @@
 import { TypingBubble } from '@/components'
+import { isMobile } from '@/utils/isMobileSignal'
 import type { AudioBubbleContent } from '@typebot.io/schemas'
 import { createSignal, onCleanup, onMount } from 'solid-js'
 
@@ -8,7 +9,7 @@ type Props = {
 }
 
 const showAnimationDuration = 400
-const typingDuration = 500
+const typingDuration = 100
 
 let typingTimeout: NodeJS.Timeout
 
@@ -18,29 +19,16 @@ export const AudioBubble = (props: Props) => {
   let audioElement: HTMLAudioElement | undefined
   const [isTyping, setIsTyping] = createSignal(true)
 
-  const endTyping = () => {
-    if (isPlayed) return
-    isPlayed = true
-    setIsTyping(false)
-    setTimeout(
-      () => props.onTransitionEnd(ref?.offsetTop),
-      showAnimationDuration
-    )
-  }
-
   onMount(() => {
-    typingTimeout = setTimeout(endTyping, typingDuration)
-    audioElement?.addEventListener(
-      'canplay',
-      () => {
-        clearTimeout(typingTimeout)
-        audioElement
-          ?.play()
-          .catch((e) => console.warn("Couldn't autoplay audio", e))
-        endTyping()
-      },
-      { once: true }
-    )
+    typingTimeout = setTimeout(() => {
+      if (isPlayed) return
+      isPlayed = true
+      setIsTyping(false)
+      setTimeout(
+        () => props.onTransitionEnd(ref?.offsetTop),
+        showAnimationDuration
+      )
+    }, typingDuration)
   })
 
   onCleanup(() => {
@@ -63,11 +51,14 @@ export const AudioBubble = (props: Props) => {
           <audio
             ref={audioElement}
             src={props.url}
+            autoplay
             class={
-              'z-10 text-fade-in m-2 ' +
-              (isTyping() ? 'opacity-0' : 'opacity-100')
+              'z-10 text-fade-in ' +
+              (isTyping() ? 'opacity-0' : 'opacity-100 m-2')
             }
-            style={{ height: isTyping() ? '32px' : 'revert' }}
+            style={{
+              height: isTyping() ? (isMobile() ? '32px' : '36px') : 'revert',
+            }}
             controls
           />
         </div>
diff --git a/packages/embeds/js/src/features/blocks/bubbles/embed/components/EmbedBubble.tsx b/packages/embeds/js/src/features/blocks/bubbles/embed/components/EmbedBubble.tsx
index 2fe70edef..5e51adcd6 100644
--- a/packages/embeds/js/src/features/blocks/bubbles/embed/components/EmbedBubble.tsx
+++ b/packages/embeds/js/src/features/blocks/bubbles/embed/components/EmbedBubble.tsx
@@ -1,6 +1,8 @@
 import { TypingBubble } from '@/components'
+import { isMobile } from '@/utils/isMobileSignal'
 import type { EmbedBubbleContent } from '@typebot.io/schemas'
 import { createSignal, onCleanup, onMount } from 'solid-js'
+import { clsx } from 'clsx'
 
 type Props = {
   content: EmbedBubbleContent
@@ -43,17 +45,25 @@ export const EmbedBubble = (props: Props) => {
           >
             {isTyping() && <TypingBubble />}
           </div>
-          <iframe
-            id="embed-bubble-content"
-            src={props.content.url}
-            class={
-              'w-full z-20 p-4 text-fade-in ' +
-              (isTyping() ? 'opacity-0' : 'opacity-100')
-            }
+          <div
+            class={clsx(
+              'p-4 z-20 text-fade-in w-full',
+              isTyping() ? 'opacity-0' : 'opacity-100 p-4'
+            )}
             style={{
-              height: isTyping() ? '32px' : `${props.content.height}px`,
+              height: isTyping()
+                ? isMobile()
+                  ? '32px'
+                  : '36px'
+                : `${props.content.height}px`,
             }}
-          />
+          >
+            <iframe
+              id="embed-bubble-content"
+              src={props.content.url}
+              class={'w-full h-full '}
+            />
+          </div>
         </div>
       </div>
     </div>
diff --git a/packages/embeds/js/src/features/blocks/bubbles/image/components/ImageBubble.tsx b/packages/embeds/js/src/features/blocks/bubbles/image/components/ImageBubble.tsx
index 650dc1e45..68628064c 100644
--- a/packages/embeds/js/src/features/blocks/bubbles/image/components/ImageBubble.tsx
+++ b/packages/embeds/js/src/features/blocks/bubbles/image/components/ImageBubble.tsx
@@ -1,6 +1,8 @@
 import { TypingBubble } from '@/components'
 import type { ImageBubbleContent } from '@typebot.io/schemas'
 import { createSignal, onCleanup, onMount } from 'solid-js'
+import { clsx } from 'clsx'
+import { isMobile } from '@/utils/isMobileSignal'
 
 type Props = {
   content: ImageBubbleContent
@@ -73,12 +75,20 @@ export const ImageBubble = (props: Props) => {
             <a
               href={props.content.clickLink.url}
               target="_blank"
-              class="p-4 z-10"
+              class={clsx('z-10', isTyping() ? 'h-8' : 'p-4')}
             >
               {Image}
             </a>
           ) : (
-            <figure class="p-4 z-10">{Image}</figure>
+            <figure
+              class={clsx(
+                'z-10',
+                !isTyping() && 'p-4',
+                isTyping() ? (isMobile() ? 'h-8' : 'h-9') : ''
+              )}
+            >
+              {Image}
+            </figure>
           )}
         </div>
       </div>
diff --git a/packages/embeds/js/src/features/blocks/bubbles/textBubble/components/TextBubble.tsx b/packages/embeds/js/src/features/blocks/bubbles/textBubble/components/TextBubble.tsx
index 31cd6c8c0..a386ca7b6 100644
--- a/packages/embeds/js/src/features/blocks/bubbles/textBubble/components/TextBubble.tsx
+++ b/packages/embeds/js/src/features/blocks/bubbles/textBubble/components/TextBubble.tsx
@@ -4,6 +4,8 @@ import { For, createSignal, onCleanup, onMount } from 'solid-js'
 import { computeTypingDuration } from '../helpers/computeTypingDuration'
 import { PlateBlock } from './plate/PlateBlock'
 import { computePlainText } from '../helpers/convertRichTextToPlainText'
+import { clsx } from 'clsx'
+import { isMobile } from '@/utils/isMobileSignal'
 
 type Props = {
   content: TextBubbleContent
@@ -65,10 +67,13 @@ export const TextBubble = (props: Props) => {
             {isTyping() && <TypingBubble />}
           </div>
           <div
-            class={
-              'overflow-hidden text-fade-in mx-4 my-2 whitespace-pre-wrap slate-html-container relative text-ellipsis ' +
-              (isTyping() ? 'opacity-0 h-6' : 'opacity-100 h-full')
-            }
+            class={clsx(
+              'overflow-hidden text-fade-in mx-4 my-2 whitespace-pre-wrap slate-html-container relative text-ellipsis',
+              isTyping() ? 'opacity-0' : 'opacity-100'
+            )}
+            style={{
+              height: isTyping() ? (isMobile() ? '16px' : '20px') : '100%',
+            }}
           >
             <For each={props.content.richText}>
               {(element) => <PlateBlock element={element} />}
diff --git a/packages/embeds/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx b/packages/embeds/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx
index 709904941..d16303fe2 100644
--- a/packages/embeds/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx
+++ b/packages/embeds/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx
@@ -1,7 +1,9 @@
 import { TypingBubble } from '@/components'
+import { isMobile } from '@/utils/isMobileSignal'
 import type { VideoBubbleContent } from '@typebot.io/schemas'
 import { VideoBubbleContentType } from '@typebot.io/schemas/features/blocks/bubbles/video/enums'
 import { createSignal, Match, onCleanup, onMount, Switch } from 'solid-js'
+import { clsx } from 'clsx'
 
 type Props = {
   content: VideoBubbleContent
@@ -13,24 +15,23 @@ let typingTimeout: NodeJS.Timeout
 
 export const VideoBubble = (props: Props) => {
   let ref: HTMLDivElement | undefined
-  let videoElement: HTMLVideoElement | undefined
   const [isTyping, setIsTyping] = createSignal(true)
 
-  const onTypingEnd = () => {
-    const videoElement = ref?.querySelector('video')
-    if (videoElement)
-      videoElement
-        .play()
-        .catch((e) => console.warn('Could not autoplay the video:', e))
-    if (!isTyping()) return
-    setIsTyping(false)
-    setTimeout(() => {
-      props.onTransitionEnd(ref?.offsetTop)
-    }, showAnimationDuration)
-  }
-
   onMount(() => {
-    typingTimeout = setTimeout(onTypingEnd, 2000)
+    const typingDuration =
+      props.content?.type &&
+      [VideoBubbleContentType.VIMEO, VideoBubbleContentType.YOUTUBE].includes(
+        props.content?.type
+      )
+        ? 2000
+        : 100
+    typingTimeout = setTimeout(() => {
+      if (!isTyping()) return
+      setIsTyping(false)
+      setTimeout(() => {
+        props.onTransitionEnd(ref?.offsetTop)
+      }, showAnimationDuration)
+    }, typingDuration)
   })
 
   onCleanup(() => {
@@ -40,7 +41,7 @@ export const VideoBubble = (props: Props) => {
   return (
     <div class="flex flex-col animate-fade-in" ref={ref}>
       <div class="flex w-full items-center">
-        <div class={'flex relative z-10 items-start typebot-host-bubble'}>
+        <div class="flex relative z-10 items-start typebot-host-bubble overflow-hidden">
           <div
             class="flex items-center absolute px-4 py-2 bubble-typing z-10 "
             style={{
@@ -58,7 +59,7 @@ export const VideoBubble = (props: Props) => {
               }
             >
               <video
-                ref={videoElement}
+                autoplay
                 src={props.content.url}
                 controls
                 class={
@@ -66,7 +67,7 @@ export const VideoBubble = (props: Props) => {
                   (isTyping() ? 'opacity-0' : 'opacity-100')
                 }
                 style={{
-                  height: isTyping() ? '32px' : 'auto',
+                  height: isTyping() ? (isMobile() ? '32px' : '36px') : 'auto',
                 }}
               />
             </Match>
@@ -79,20 +80,26 @@ export const VideoBubble = (props: Props) => {
                 ].includes(props.content.type)
               }
             >
-              <iframe
-                src={`${
-                  props.content.type === VideoBubbleContentType.VIMEO
-                    ? 'https://player.vimeo.com/video'
-                    : 'https://www.youtube.com/embed'
-                }/${props.content.id}`}
-                class={
-                  'w-full p-4 text-fade-in z-10 ' +
-                  (isTyping() ? 'opacity-0' : 'opacity-100')
-                }
-                height={isTyping() ? '32px' : '200px'}
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                allowfullscreen
-              />
+              <div
+                class={clsx(
+                  'p-4 z-10 text-fade-in w-full',
+                  isTyping() ? 'opacity-0' : 'opacity-100 p-4'
+                )}
+                style={{
+                  height: isTyping() ? (isMobile() ? '32px' : '36px') : '200px',
+                }}
+              >
+                <iframe
+                  src={`${
+                    props.content.type === VideoBubbleContentType.VIMEO
+                      ? 'https://player.vimeo.com/video'
+                      : 'https://www.youtube.com/embed'
+                  }/${props.content.id}`}
+                  class={'w-full h-full'}
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                  allowfullscreen
+                />
+              </div>
             </Match>
           </Switch>
         </div>
diff --git a/packages/embeds/nextjs/package.json b/packages/embeds/nextjs/package.json
index a840f0b78..05c9b4592 100644
--- a/packages/embeds/nextjs/package.json
+++ b/packages/embeds/nextjs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
diff --git a/packages/embeds/react/package.json b/packages/embeds/react/package.json
index 06ac392fc..2d7fc0209 100644
--- a/packages/embeds/react/package.json
+++ b/packages/embeds/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",