scale embeddable and fix youtube start bug

src/components/App.tsx

@@ -868,6 +868,10 @@ class App extends React.Component<AppProps, AppState> {
             this.state.activeEmbeddable?.element === el &&
             this.state.activeEmbeddable?.state === "hover";
 
+          // Modify the scale based on el.scale property
+          const [xScale, yScale] = el.scale;
+          const scaledTransform = `scale(${scale * xScale}, ${scale * yScale})`;
+
           return (
             <div
               key={el.id}
@@ -878,7 +882,7 @@ class App extends React.Component<AppProps, AppState> {
                 transform: isVisible
                   ? `translate(${x - this.state.offsetLeft}px, ${
                       y - this.state.offsetTop
-                    }px) scale(${scale})`
+                    }px) ${scaledTransform}`
                   : "none",
                 display: isVisible ? "block" : "none",
                 opacity: el.opacity / 100,
@@ -907,8 +911,8 @@ class App extends React.Component<AppProps, AppState> {
                 }}*/
                 className="excalidraw__embeddable-container__inner"
                 style={{
-                  width: isVisible ? `${el.width}px` : 0,
+                  width: isVisible ? `${el.width / xScale}px` : 0,
-                  height: isVisible ? `${el.height}px` : 0,
+                  height: isVisible ? `${el.height / yScale}px` : 0,
                   transform: isVisible ? `rotate(${el.angle}rad)` : "none",
                   pointerEvents: isActive
                     ? POINTER_EVENTS.enabled

src/data/restore.ts

@@ -297,6 +297,7 @@ const restoreElement = (
     case "embeddable":
       return restoreElementWithProperties(element, {
         validated: null,
+        scale: [1, 1],
       });
     case "frame":
       return restoreElementWithProperties(element, {

src/element/embeddable.ts

@@ -27,7 +27,7 @@ type EmbeddedLink =
 const embeddedLinkCache = new Map<string, EmbeddedLink>();
 
 const RE_YOUTUBE =
-  /^(?:http(?:s)?:\/\/)?(?:www\.)?youtu(?:be\.com|\.be)\/(embed\/|watch\?v=|shorts\/|playlist\?list=|embed\/videoseries\?list=)?([a-zA-Z0-9_-]+)(?:\?t=|&t=|\?start=|&start=)?([a-zA-Z0-9_-]+)?[^\s]*$/;
+  /^(?:http(?:s)?:\/\/)?(?:www\.)?youtu(?:be\.com|\.be)\/(embed\/|watch\?v=|shorts\/|playlist\?list=|embed\/videoseries\?list=)?([a-zA-Z0-9_-]+)(?:\?t=|.*&t=|\?start=|.*&start=)?([a-zA-Z0-9_-]+)?[^\s]*$/;
 
 const RE_VIMEO =
   /^(?:http(?:s)?:\/\/)?(?:(?:w){3}.)?(?:player\.)?vimeo\.com\/(?:video\/)?([^?\s]+)(?:\?.*)?$/;

src/element/newElement.ts

@@ -140,6 +140,7 @@ export const newEmbeddableElement = (
   return {
     ..._newElementBase<ExcalidrawEmbeddableElement>("embeddable", opts),
     validated: opts.validated,
+    scale: [1, 1],
   };
 };
 

src/element/resizeElements.ts

@@ -27,6 +27,7 @@ import {
 import {
   isArrowElement,
   isBoundToContainer,
+  isEmbeddableElement,
   isFrameElement,
   isFreeDrawElement,
   isImageElement,
@@ -586,6 +587,14 @@ export const resizeSingleElement = (
   };
 
   if ("scale" in element && "scale" in stateAtResizeStart) {
+    if (isEmbeddableElement(element) && shouldMaintainAspectRatio) {
+      const scale: [number, number] = [
+        eleNewWidth / (stateAtResizeStart.width / stateAtResizeStart.scale[0]),
+        eleNewHeight /
+          (stateAtResizeStart.height / stateAtResizeStart.scale[1]),
+      ];
+      mutateElement(element, { scale });
+    } else {
       mutateElement(element, {
         scale: [
           // defaulting because scaleX/Y can be 0/-0
@@ -596,6 +605,7 @@ export const resizeSingleElement = (
         ],
       });
     }
+  }
 
   if (
     isArrowElement(element) &&

src/element/types.ts

@@ -95,6 +95,7 @@ export type ExcalidrawEmbeddableElement = _ExcalidrawElementBase &
      * may not have access to host-app supplied url validator during restore.
      */
     validated: boolean | null;
+    scale: [number, number];
   }>;
 
 export type ExcalidrawImageElement = _ExcalidrawElementBase &

src/tests/fixtures/elementFixture.ts

@@ -35,6 +35,7 @@ export const embeddableFixture: ExcalidrawElement = {
   ...elementBase,
   type: "embeddable",
   validated: null,
+  scale: [1, 1],
 };
 export const ellipseFixture: ExcalidrawElement = {
   ...elementBase,