diff --git a/web/packages/core/src/internal/player/inner.tsx b/web/packages/core/src/internal/player/inner.tsx
index d8af904f19b85..bd9aa27757dd3 100644
--- a/web/packages/core/src/internal/player/inner.tsx
+++ b/web/packages/core/src/internal/player/inner.tsx
@@ -489,6 +489,42 @@ export class InnerPlayer {
                 }
             }
 
+            const alignAttr = this.element.attributes.getNamedItem("align");
+            if (alignAttr !== undefined && alignAttr !== null) {
+                const alignValue = alignAttr.value.toLowerCase();
+
+                const alignCSS = (() => {
+                    switch (alignValue) {
+                        case "right":
+                            return "vertical-align: top; float: right;";
+                        case "left":
+                            return "vertical-align: top; float: left;";
+                        case "bottom":
+                            return "vertical-align: baseline;";
+                        case "top":
+                            return "vertical-align: top;";
+                        case "center":
+                            return "vertical-align: middle; vertical-align: -moz-middle-with-baseline;";
+                        case "middle":
+                            return "vertical-align: middle; vertical-align: -webkit-baseline-middle; vertical-align: -moz-middle-with-baseline;";
+                        case "absbottom":
+                            return "vertical-align: bottom;";
+                        case "absmiddle":
+                            return "vertical-align: middle;";
+                        case "texttop":
+                            return "vertical-align: text-top;";
+                        default:
+                            return "";
+                    }
+                })();
+
+                if (alignCSS) {
+                    this.dynamicStyles.sheet.insertRule(
+                        `:host { ${alignCSS} }`
+                    );
+                }
+            }
+
             const widthAttr = this.element.attributes.getNamedItem("width");
             if (widthAttr !== undefined && widthAttr !== null) {
                 const width = InnerPlayer.htmlDimensionToCssDimension(
diff --git a/web/packages/core/src/internal/player/ruffle-embed-element.ts b/web/packages/core/src/internal/player/ruffle-embed-element.ts
index b96cdb4c7e895..f863ed043e017 100644
--- a/web/packages/core/src/internal/player/ruffle-embed-element.ts
+++ b/web/packages/core/src/internal/player/ruffle-embed-element.ts
@@ -76,7 +76,7 @@ export class RuffleEmbedElement extends RufflePlayerElement {
      * @internal
      */
     static override get observedAttributes(): string[] {
-        return ["src", "width", "height"];
+        return [...RufflePlayerElement.observedAttributes, "src"];
     }
 
     /**
diff --git a/web/packages/core/src/internal/player/ruffle-player-element.tsx b/web/packages/core/src/internal/player/ruffle-player-element.tsx
index e5059e436a1a8..aee75c0db3182 100644
--- a/web/packages/core/src/internal/player/ruffle-player-element.tsx
+++ b/web/packages/core/src/internal/player/ruffle-player-element.tsx
@@ -76,7 +76,7 @@ export class RufflePlayerElement extends HTMLElement implements PlayerElement {
     }
 
     static get observedAttributes(): string[] {
-        return ["width", "height"];
+        return ["width", "height", "align"];
     }
 
     attributeChangedCallback(
@@ -84,7 +84,7 @@ export class RufflePlayerElement extends HTMLElement implements PlayerElement {
         _oldValue: string | undefined,
         _newValue: string | undefined,
     ): void {
-        if (name === "width" || name === "height") {
+        if (RufflePlayerElement.observedAttributes.includes(name)) {
             this.#inner.updateStyles();
         }
     }