diff --git a/components/playground/element.css b/components/playground/element.css
index 9a56bc330..7b223ab1f 100644
--- a/components/playground/element.css
+++ b/components/playground/element.css
@@ -93,6 +93,8 @@
     }
 
     &.playground__runner-console {
+      position: relative;
+
       grid-area: runner;
 
       overflow: hidden;
@@ -168,3 +170,14 @@ mdn-modal {
     justify-content: flex-end;
   }
 }
+
+.overlay-run-button {
+  position: absolute;
+  inset: 4rem 1rem 9rem;
+  z-index: 1;
+
+  font-size: clamp(1.5rem, 3vw, 3rem);
+
+  background-color: var(--color-border-primary);
+  border-radius: 0.5rem;
+}
diff --git a/components/playground/element.js b/components/playground/element.js
index 17268195e..3f556bf6b 100644
--- a/components/playground/element.js
+++ b/components/playground/element.js
@@ -4,6 +4,7 @@ import { createRef, ref } from "lit/directives/ref.js";
 
 import { L10nMixin } from "../../l10n/mixin.js";
 import { gleanClick } from "../../utils/glean.js";
+import circlePlay from "../icon/circle-play.svg?lit";
 import { globalUser } from "../user/context.js";
 
 import styles from "./element.css?lit";
@@ -65,6 +66,7 @@ export class MDNPlayground extends L10nMixin(LitElement) {
         this._autoRun = true;
         controller.runOnChange = true;
         this._storeSession();
+        this.requestUpdate();
       }
     }
   }
@@ -361,6 +363,16 @@ ${"```"}`,
                   Seeing something inappropriate?
                 </mdn-button>`
               : nothing}
+            ${this._autoRun
+              ? nothing
+              : html`<mdn-button
+                  class="overlay-run-button"
+                  @click=${this._run}
+                  .icon=${circlePlay}
+                  variant="plain"
+                >
+                  Run
+                </mdn-button>`}
             <mdn-play-runner></mdn-play-runner>
             <div class="playground__console">
               <div>${this.l10n`Console`}</div>