diff --git a/apps/docs/public/assets/lessons/embed/create.png b/apps/docs/public/assets/lessons/embed/create.png
new file mode 100644
index 000000000..a35c7c82e
Binary files /dev/null and b/apps/docs/public/assets/lessons/embed/create.png differ
diff --git a/apps/docs/public/assets/lessons/embed/details.png b/apps/docs/public/assets/lessons/embed/details.png
new file mode 100644
index 000000000..5734ab008
Binary files /dev/null and b/apps/docs/public/assets/lessons/embed/details.png differ
diff --git a/apps/docs/public/assets/lessons/embed/preview.png b/apps/docs/public/assets/lessons/embed/preview.png
new file mode 100644
index 000000000..bdd43ccd6
Binary files /dev/null and b/apps/docs/public/assets/lessons/embed/preview.png differ
diff --git a/apps/docs/public/assets/lessons/embed/save.png b/apps/docs/public/assets/lessons/embed/save.png
new file mode 100644
index 000000000..131a66b90
Binary files /dev/null and b/apps/docs/public/assets/lessons/embed/save.png differ
diff --git a/apps/docs/public/assets/pages/embed-block.png b/apps/docs/public/assets/pages/embed-block.png
new file mode 100644
index 000000000..5642830ce
Binary files /dev/null and b/apps/docs/public/assets/pages/embed-block.png differ
diff --git a/apps/docs/src/pages/en/courses/add-content.md b/apps/docs/src/pages/en/courses/add-content.md
index f1d2319ea..49f2a1aa9 100644
--- a/apps/docs/src/pages/en/courses/add-content.md
+++ b/apps/docs/src/pages/en/courses/add-content.md
@@ -42,6 +42,8 @@ A lesson is a container for the actual learning material. CourseLit supports mul
 
     For embedding HTML or iframe based content.
 
+    See the [guide to add an embed](/en/lessons/embed).
+
 7. Quiz
 
     For quizzing your students. You can create graded and non-graded quizzes.
diff --git a/apps/docs/src/pages/en/lessons/embed.md b/apps/docs/src/pages/en/lessons/embed.md
new file mode 100644
index 000000000..9d6a79cd4
--- /dev/null
+++ b/apps/docs/src/pages/en/lessons/embed.md
@@ -0,0 +1,37 @@
+---
+title: Add an embed to a course
+description: Add an embed to a course
+layout: ../../../layouts/MainLayout.astro
+---
+
+You can easily add embeds to your online courses in CourseLit. This article will show you how.
+
+## Add an embed to a course
+
+1. Go to the `Products` page and click on the course you want to add SCORM content to. Click on `Edit content`.
+
+2. Click on `Add lesson` in any section.
+
+3. On the New Lesson screen, you'll see a row of lesson type cards. Click on the `Embed` card to select it.
+
+![Embed card](/assets/lessons/embed/create.png)
+
+4. Enter the title and the embed code.
+
+![Embed details](/assets/lessons/embed/details.png)
+
+5. The preview of the embeddable content will show up below the embed code.
+
+![Embed preview](/assets/lessons/embed/preview.png)
+
+6. Hit `Save` to save changes to your lesson.
+
+![Embed Save](/assets/lessons/embed/save.png)
+
+## What embeds are supported
+
+You can see the list of platforms [here](/en/website/blocks#what-embeds-are-supported).
+
+## Stuck somewhere?
+
+We are always there for you. Come chat with us in our <a href="https://discord.com/invite/GR4bQsN" target="_blank">Discord</a> channel or send a tweet at <a href="https://twitter.com/courselit" target="_blank">@CourseLit</a>.
diff --git a/apps/docs/src/pages/en/website/blocks.md b/apps/docs/src/pages/en/website/blocks.md
index 072c716db..0185675fa 100644
--- a/apps/docs/src/pages/en/website/blocks.md
+++ b/apps/docs/src/pages/en/website/blocks.md
@@ -36,7 +36,7 @@ You will also see the newly added link on the header itself.
 3. Click on the pencil icon against the newly added link to edit it as shown above.
 4. Change the label (displayed as text on the header block) and the URL (where the user should be taken upon clicking the label on the header) and click `Done` to save.
    ![Header edit link](/assets/pages/header-edit-link.png)
-    </details>
+     </details>
 
 ### [Rich Text](#rich-text)
 
@@ -69,7 +69,7 @@ The rich text block uses the same text editor available elsewhere on the platfor
 2. Click on the floating `link` icon to reveal a text input.
 3. In the popup text input, enter the URL as shown below and press <kbd>Enter</kbd>.
    ![Create a hyperlink in rich text block](/assets/pages/courselit-text-editor-create-links.gif)
-    </details>
+     </details>
 
 ### [Hero](#hero)
 
@@ -95,7 +95,7 @@ Following is how it looks on a page.
 4. In the button action, enter the URL the user should be taken to upon clicking.
    a. If the URL is from your own school, use its relative form, i.e., `/courses`.
    b. If the URL is from some external website, use the absolute (complete) URL, i.e., `https://website.com/courses`.
-    </details>
+     </details>
 
 ### [Grid](#grid)
 
@@ -140,7 +140,7 @@ A grid block comes in handy when you want to show some sort of list, for example
 4. In the button action, enter the URL the user should be taken to upon clicking.
    a. If the URL is from your own school, use its relative form, i.e., `/courses`.
    b. If the URL is from some external website, use the absolute (complete) URL, i.e., `https://website.com/courses`.
-    </details>
+     </details>
 
 ### [Featured](#featured)
 
@@ -250,6 +250,52 @@ Following is an animation that shows the entire flow.
 
 </details>
 
+### [Embed](#embed)
+
+<details>
+<summary>Expand to see Embed block details</summary>
+
+Embedding content from other websites is a common requirement. CourseLit offers a dedicated block that lets you embed content from other websites.
+
+You can embed websites (using `URL` type) or widgets (using `Script` type).
+
+The height of the content in case of `Script` type embed is automatically calculated. The `Height` property in the builder has no effect.
+
+Following is how it looks while displaying a Cal.com calendar.
+
+## What embeds are supported
+
+Although, CourseLit platform should support any embed code, we have tested with the following platforms:
+<br />
+<br />
+
+- YouTube
+- Vimeo
+- Google Docs
+- Microsoft Word
+- Google Forms
+- Typeform
+- Microsoft Forms
+- Google Calendar
+- GitHub Gist
+- Apple Podcasts
+- SoundCloud
+- Spotify
+- Senja
+- Addcal
+  <br />
+  <br />
+
+Here is [Cal.com](https://cal.com/)'s embed looks on a page.
+<br />
+<br />
+
+![Embed block](/assets/pages/embed-block.png)
+
+> Embed code not working? Please reach out to us on <a href="https://discord.com/invite/GR4bQsN" target="_blank">Discord</a>.
+
+</details>
+
 ### [Footer](#footer)
 
 <details>
@@ -276,7 +322,7 @@ In the `Design` panel, you can customize:
 - Maximum width
 - Vertical padding
 - Social media links (Facebook, Twitter, Instagram, LinkedIn, YouTube, Discord, GitHub)
-    </details>
+      </details>
 
 ## [Shared blocks](#shared-blocks)
 
diff --git a/apps/web/components/public/lesson-viewer/embed-viewer.tsx b/apps/web/components/public/lesson-viewer/embed-viewer.tsx
index 7b6ab3040..bcf0c631f 100644
--- a/apps/web/components/public/lesson-viewer/embed-viewer.tsx
+++ b/apps/web/components/public/lesson-viewer/embed-viewer.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { UIConstants } from "@courselit/common-models";
+import { SandboxedEmbed } from "@courselit/page-blocks";
 
 const YouTubeEmbed = ({ content }: { content: string }) => {
     const match = content.match(UIConstants.YOUTUBE_REGEX);
@@ -22,11 +23,16 @@ interface LessonEmbedViewerProps {
 }
 
 const LessonEmbedViewer = ({ content }: LessonEmbedViewerProps) => {
+    const isYouTube =
+        content.value.includes("youtube") || content.value.includes("youtu.be");
+    const hasScript = content.value.includes("<script");
+
     return (
         <>
-            {content.value.includes("youtube") ||
-            content.value.includes("youtu.be") ? (
+            {isYouTube ? (
                 <YouTubeEmbed content={content.value} />
+            ) : hasScript ? (
+                <SandboxedEmbed content={content.value} />
             ) : (
                 <div
                     dangerouslySetInnerHTML={{
diff --git a/apps/web/ui-config/strings.ts b/apps/web/ui-config/strings.ts
index cdbd0bb7a..6e46da02b 100644
--- a/apps/web/ui-config/strings.ts
+++ b/apps/web/ui-config/strings.ts
@@ -726,5 +726,5 @@ export const PRODUCTS_LIST_EMPTY_DESCRIPTION_PRIVATE =
     "You have not added any products yet.";
 export const LOGIN_CODE_SENT_MESSAGE =
     "We have emailed you a one time password.";
-export const LESSON_EMBED_URL_LABEL = "URL or Iframe Code";
+export const LESSON_EMBED_URL_LABEL = "Embed code";
 export const LESSON_CONTENT_LABEL = "Content";
diff --git a/packages/components-library/src/index.ts b/packages/components-library/src/index.ts
index 0a4ded271..57489cf4f 100644
--- a/packages/components-library/src/index.ts
+++ b/packages/components-library/src/index.ts
@@ -54,7 +54,6 @@ export * from "./paginated-table";
 import getSymbolFromCurrency from "currency-symbol-map";
 export * from "./content-card";
 export * from "./skeleton-card";
-export * from "./video-with-preview";
 export * from "./image";
 export * from "./vertical-padding-selector";
 export * from "./max-width-selector";
diff --git a/packages/page-blocks/src/blocks/embed/widget.tsx b/packages/page-blocks/src/blocks/embed/widget.tsx
index 7a22623c8..9a3ac4287 100644
--- a/packages/page-blocks/src/blocks/embed/widget.tsx
+++ b/packages/page-blocks/src/blocks/embed/widget.tsx
@@ -1,11 +1,13 @@
-import React, { useRef, useEffect } from "react";
+import React, { useRef } from "react";
 import { WidgetProps } from "@courselit/common-models";
 import { height as defaultHeight } from "./defaults";
 import Settings from "./settings";
 import { ThemeStyle } from "@courselit/page-models";
 import { Section } from "@courselit/page-primitives";
+import { SandboxedEmbed } from "../../components";
 
 export default function Widget({
+    id,
     settings: {
         contentType,
         content,
@@ -25,10 +27,12 @@ export default function Widget({
         verticalPadding || theme.theme.structure.section.padding.y;
 
     const iframeRef = useRef<HTMLIFrameElement>(null);
-    const containerRef = useRef<HTMLDivElement>(null);
 
     const formattedHeight = `${height}px`;
 
+    // Check if content is "script" or "iframe" (not a direct URL)
+    const isEmbedCode = contentType === "script";
+
     const containerStyle =
         aspectRatio && aspectRatio !== "default"
             ? ({
@@ -36,7 +40,9 @@ export default function Widget({
                   width: "100%",
                   paddingTop: `calc(100% / (${aspectRatio.split(":")[0]} / ${aspectRatio.split(":")[1]}))`,
               } as React.CSSProperties)
-            : ({ height: formattedHeight } as React.CSSProperties);
+            : isEmbedCode
+              ? ({} as React.CSSProperties)
+              : ({ height: formattedHeight } as React.CSSProperties);
 
     const iframeStyle =
         aspectRatio && aspectRatio !== "default"
@@ -47,28 +53,35 @@ export default function Widget({
                   width: "100%",
                   height: "100%",
               } as React.CSSProperties)
-            : ({ height: "100%" } as React.CSSProperties);
-
-    useEffect(() => {
-        if (contentType === "script" && content && containerRef.current) {
-            const tempContainer = document.createElement("div");
-            tempContainer.innerHTML = content;
+            : isEmbedCode
+              ? ({} as React.CSSProperties)
+              : ({ height: "100%" } as React.CSSProperties);
 
-            // Append all elements to the container
-            Array.from(tempContainer.children).forEach((elem) => {
-                if (elem.nodeName === "SCRIPT") {
-                    const script = document.createElement("script");
-                    script.innerHTML = elem.innerHTML;
-                    Array.from(elem.attributes).forEach((attr) => {
-                        script.setAttribute(attr.name, attr.value);
-                    });
-                    containerRef.current?.appendChild(script);
-                } else {
-                    containerRef.current?.appendChild(elem.cloneNode(true));
-                }
-            });
+    const renderContent = () => {
+        if (isEmbedCode) {
+            // Content is a script or iframe code - use sandboxed embed for dynamic height
+            return (
+                <SandboxedEmbed
+                    id={id}
+                    content={content}
+                    className="w-full"
+                    style={iframeStyle}
+                />
+            );
+        } else {
+            // URL-based content
+            return (
+                <iframe
+                    ref={iframeRef}
+                    src={content}
+                    className="w-full border-0"
+                    style={iframeStyle}
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                    allowFullScreen
+                />
+            );
         }
-    }, [contentType, content]);
+    };
 
     return (
         <Section theme={overiddenTheme} id={cssId}>
@@ -78,22 +91,7 @@ export default function Widget({
                         className={`w-full overflow-hidden relative`}
                         style={containerStyle}
                     >
-                        {contentType === "script" ? (
-                            <div
-                                ref={containerRef}
-                                className="w-full h-full"
-                                style={iframeStyle}
-                            />
-                        ) : (
-                            <iframe
-                                ref={iframeRef}
-                                src={content}
-                                className="w-full border-0"
-                                style={iframeStyle}
-                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                                allowFullScreen
-                            />
-                        )}
+                        {renderContent()}
                     </div>
                 </div>
             </div>
diff --git a/packages/page-blocks/src/blocks/hero/admin-widget.tsx b/packages/page-blocks/src/blocks/hero/admin-widget.tsx
index 5a24cd156..286666f51 100644
--- a/packages/page-blocks/src/blocks/hero/admin-widget.tsx
+++ b/packages/page-blocks/src/blocks/hero/admin-widget.tsx
@@ -21,13 +21,13 @@ import {
     PageBuilderSlider,
     PageBuilderPropertyHeader,
     CssIdField,
-    AspectRatio,
     ImageObjectFit,
     Checkbox,
     VerticalPaddingSelector,
     MaxWidthSelector,
     SectionBackgroundPanel,
 } from "@courselit/components-library";
+import { AspectRatio } from "../../components";
 import { isVideo } from "@courselit/utils";
 import { Editor } from "@courselit/text-editor";
 
diff --git a/packages/page-blocks/src/blocks/hero/settings.ts b/packages/page-blocks/src/blocks/hero/settings.ts
index cecaeab4b..af4d88519 100644
--- a/packages/page-blocks/src/blocks/hero/settings.ts
+++ b/packages/page-blocks/src/blocks/hero/settings.ts
@@ -5,7 +5,7 @@ import {
     WidgetDefaultSettings,
 } from "@courselit/common-models";
 import { ImageObjectFit } from "@courselit/components-library";
-import { AspectRatio } from "@courselit/components-library";
+import { AspectRatio } from "../../components";
 
 export default interface Settings extends WidgetDefaultSettings {
     title?: string;
diff --git a/packages/page-blocks/src/blocks/hero/widget.tsx b/packages/page-blocks/src/blocks/hero/widget.tsx
index 028b90096..0e7bf6d6b 100644
--- a/packages/page-blocks/src/blocks/hero/widget.tsx
+++ b/packages/page-blocks/src/blocks/hero/widget.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 import { WidgetProps } from "@courselit/common-models";
 import Settings from "./settings";
-import { Image, VideoWithPreview, Link } from "@courselit/components-library";
-import { TextRenderer } from "../../components";
+import { Image, Link } from "@courselit/components-library";
+import { TextRenderer, VideoWithPreview } from "../../components";
 import { isVideo } from "@courselit/utils";
 import clsx from "clsx";
 import {
diff --git a/packages/page-blocks/src/blocks/media/admin-widget.tsx b/packages/page-blocks/src/blocks/media/admin-widget.tsx
index 984c49a6f..9c6017d6f 100644
--- a/packages/page-blocks/src/blocks/media/admin-widget.tsx
+++ b/packages/page-blocks/src/blocks/media/admin-widget.tsx
@@ -11,13 +11,13 @@ import {
     PageBuilderSlider,
     CssIdField,
     Checkbox,
-    AspectRatio,
     ImageObjectFit,
     Select,
     MaxWidthSelector,
     VerticalPaddingSelector,
     Tooltip,
 } from "@courselit/components-library";
+import { AspectRatio } from "../../components";
 import { isVideo } from "@courselit/utils";
 import type { Theme, ThemeStyle } from "@courselit/page-models";
 import { Help } from "@courselit/icons";
diff --git a/packages/page-blocks/src/blocks/media/settings.ts b/packages/page-blocks/src/blocks/media/settings.ts
index 0c7c3f862..fabc03c6a 100644
--- a/packages/page-blocks/src/blocks/media/settings.ts
+++ b/packages/page-blocks/src/blocks/media/settings.ts
@@ -1,5 +1,6 @@
 import { Media, WidgetDefaultSettings } from "@courselit/common-models";
-import { AspectRatio, ImageObjectFit } from "@courselit/components-library";
+import { ImageObjectFit } from "@courselit/components-library";
+import { AspectRatio } from "../../components";
 export default interface Settings extends WidgetDefaultSettings {
     media?: Media;
     youtubeLink?: string;
diff --git a/packages/page-blocks/src/blocks/media/widget.tsx b/packages/page-blocks/src/blocks/media/widget.tsx
index de8237fd4..3e186d575 100644
--- a/packages/page-blocks/src/blocks/media/widget.tsx
+++ b/packages/page-blocks/src/blocks/media/widget.tsx
@@ -1,7 +1,8 @@
 import React from "react";
 import { WidgetProps } from "@courselit/common-models";
 import Settings from "./settings";
-import { Image, VideoWithPreview } from "@courselit/components-library";
+import { Image } from "@courselit/components-library";
+import { VideoWithPreview } from "../../components";
 import { isVideo } from "@courselit/utils";
 import { Section } from "@courselit/page-primitives";
 import { ThemeStyle } from "@courselit/page-models";
diff --git a/packages/page-blocks/src/components/index.ts b/packages/page-blocks/src/components/index.ts
index c19b693e2..82f3b1c78 100644
--- a/packages/page-blocks/src/components/index.ts
+++ b/packages/page-blocks/src/components/index.ts
@@ -1,2 +1,4 @@
 export * from "./product-card";
 export * from "./text-renderer";
+export * from "./sandboxed-embed";
+export * from "./video-with-preview";
diff --git a/packages/page-blocks/src/components/sandboxed-embed.tsx b/packages/page-blocks/src/components/sandboxed-embed.tsx
new file mode 100644
index 000000000..5b66d8cc7
--- /dev/null
+++ b/packages/page-blocks/src/components/sandboxed-embed.tsx
@@ -0,0 +1,100 @@
+import React, { useEffect, useId, useRef, useState } from "react";
+
+interface SandboxedEmbedProps {
+    content: string;
+    className?: string;
+    style?: React.CSSProperties;
+    id?: string;
+}
+
+export const SandboxedEmbed = ({
+    content,
+    className,
+    style,
+    id,
+}: SandboxedEmbedProps) => {
+    const iframeRef = useRef<HTMLIFrameElement>(null);
+    const [height, setHeight] = useState("100px");
+    const generatedId = useId();
+    const iframeId = id || generatedId;
+
+    useEffect(() => {
+        const handleMessage = (event: MessageEvent) => {
+            if (
+                event.data?.type === "embed-resize" &&
+                event.data?.id === iframeId &&
+                event.data?.height
+            ) {
+                setHeight(`${event.data.height}px`);
+            }
+        };
+
+        window.addEventListener("message", handleMessage);
+        return () => window.removeEventListener("message", handleMessage);
+    }, [iframeId]);
+
+    const srcDoc = `
+        <!DOCTYPE html>
+        <html>
+        <head>
+            <style>
+                html, body { margin: 0; padding: 0; height: auto; min-height: 100%; }
+                #content-wrapper { overflow: auto; height: auto; }
+            </style>
+        </head>
+        <body>
+            <div id="content-wrapper">
+                ${content || ""}
+            </div>
+            <script>
+                const iframeId = "${iframeId}";
+                
+                function sendHeight() {
+                    const wrapper = document.getElementById('content-wrapper');
+                    const height = wrapper ? wrapper.scrollHeight : document.body.scrollHeight;
+                    window.parent.postMessage({ type: "embed-resize", id: iframeId, height: height }, "*");
+                }
+
+                // Use a ResizeObserver to detect size changes
+                const resizeObserver = new ResizeObserver(entries => {
+                    sendHeight();
+                });
+                const target = document.getElementById('content-wrapper') || document.body;
+                resizeObserver.observe(target);
+                
+                // Use MutationObserver to detect DOM changes
+                const mutationObserver = new MutationObserver(() => {
+                    sendHeight();
+                });
+                mutationObserver.observe(target, { childList: true, subtree: true, attributes: true });
+                
+                // Poll for a few seconds to catch late-loading content
+                let interval = setInterval(sendHeight, 500);
+                setTimeout(() => clearInterval(interval), 10000);
+                
+                window.addEventListener('load', sendHeight);
+                window.addEventListener('resize', sendHeight);
+                
+                // Initial send
+                sendHeight();
+            </script>
+        </body>
+        </html>
+    `;
+
+    return (
+        <iframe
+            ref={iframeRef}
+            srcDoc={srcDoc}
+            className={className}
+            style={{
+                width: "100%",
+                height: height,
+                border: "none",
+                ...style,
+            }}
+            sandbox="allow-scripts allow-popups allow-forms allow-same-origin"
+            title="Embedded Content"
+        />
+    );
+};
diff --git a/packages/components-library/src/video-with-preview.tsx b/packages/page-blocks/src/components/video-with-preview.tsx
similarity index 100%
rename from packages/components-library/src/video-with-preview.tsx
rename to packages/page-blocks/src/components/video-with-preview.tsx