diff --git a/web/js-src/ruffle-player.js b/web/js-src/ruffle-player.js
index 95d30d2da..60a9f9e43 100644
--- a/web/js-src/ruffle-player.js
+++ b/web/js-src/ruffle-player.js
@@ -14,11 +14,16 @@ export class RufflePlayer extends HTMLElement {
     constructor(...args) {
         let self = super(...args);
 
-        self.shadow = self.attachShadow({mode: 'closed'});
+        self.shadow = self.attachShadow({ mode: 'closed' });
         self.shadow.appendChild(ruffle_shadow_template.content.cloneNode(true));
 
         self.dynamic_styles = self.shadow.getElementById("dynamic_styles");
         self.canvas = self.shadow.getElementById("player");
+        self.play_button = self.shadow.getElementById("play_button");
+        if (self.play_button) {
+            self.play_button.addEventListener("click", self.play_button_clicked.bind(self));
+        }
+
         self.instance = null;
 
         self.Ruffle = load_ruffle();
@@ -113,6 +118,15 @@ export class RufflePlayer extends HTMLElement {
         }
     }
 
+    play_button_clicked(event) {
+        if (this.instance) {
+            this.instance.play();
+            if (this.play_button) {
+                this.play_button.style.display = "none";
+            }
+        }
+    }
+
     async play_swf_data(data) {
         if (this.isConnected && !this.is_unused_fallback_object()) {
             console.log("Got SWF data");
@@ -127,9 +141,13 @@ export class RufflePlayer extends HTMLElement {
                 console.error("Serious error loading Ruffle: " + e);
                 throw e;
             });
-            
+
             this.instance = Ruffle.new(this.canvas, new Uint8Array(data));
             console.log("New Ruffle instance created.");
+
+            if (this.play_button) {
+                this.play_button.style.display = "block";
+            }
         } else {
             console.warn("Ignoring attempt to play a disconnected or suspended Ruffle element");
         }
diff --git a/web/js-src/shadow-template.js b/web/js-src/shadow-template.js
index 5d16da292..4fd8d216b 100644
--- a/web/js-src/shadow-template.js
+++ b/web/js-src/shadow-template.js
@@ -5,13 +5,49 @@ ruffle_shadow_tmpl.innerHTML = `
             display: inline-block;
         }
 
+        #container {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+        }
+
         #player {
             width: 100%;
             height: 100%;
         }
+        
+        #play_button {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            cursor: pointer;
+            display: none;
+        }
+
+        #play_button .icon {
+            position: relative;
+            background-image: url("data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyNTBweCIgaGVpZ2h0PSIyNTBweCIgdmlld0JveD0iMCAwIDI1MCAyNTAiPgo8ZGVmcz4KPGxpbmVhckdyYWRpZW50IGlkPSJHcmFkaWVudF8xIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjEyNSIgeTE9IjAiIHgyPSIxMjUiIHkyPSIyNTAiIHNwcmVhZE1ldGhvZD0icGFkIj4KPHN0b3AgIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNGREExMzgiLz4KCjxzdG9wICBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNGRDNBNDAiLz4KPC9saW5lYXJHcmFkaWVudD4KCjxnIGlkPSJMYXllcjBfMF9GSUxMIj4KPHBhdGggZmlsbD0idXJsKCNHcmFkaWVudF8xKSIgc3Ryb2tlPSJub25lIiBkPSIKTSAyNTAgMTI1ClEgMjUwIDczLjIgMjEzLjM1IDM2LjYgMTc2LjggMCAxMjUgMCA3My4yIDAgMzYuNjUgMzYuNiAwIDczLjIgMCAxMjUgMCAxNzYuOCAzNi42NSAyMTMuMzUgNzMuMiAyNTAgMTI1IDI1MCAxNzYuOCAyNTAgMjEzLjM1IDIxMy4zNSAyNTAgMTc2LjggMjUwIDEyNQpNIDg3IDE5NQpMIDg3IDU1IDE4NyAxMjUgODcgMTk1IFoiLz4KCjxwYXRoIGZpbGw9IiNGRkZGRkYiIHN0cm9rZT0ibm9uZSIgZD0iCk0gODcgNTUKTCA4NyAxOTUgMTg3IDEyNSA4NyA1NSBaIi8+CjwvZz4KPC9kZWZzPgoKPGcgdHJhbnNmb3JtPSJtYXRyaXgoIDEsIDAsIDAsIDEsIDAsMCkgIj4KPHVzZSB4bGluazpocmVmPSIjTGF5ZXIwXzBfRklMTCIvPgo8L2c+Cjwvc3ZnPgo=");
+            background-size: 100% 100%;
+            top: 50%;
+            left: 50%;
+            width: 90%;
+            height: 90%;
+            max-width: 500px;
+            max-height: 500px;
+            transform: translate(-50%, -50%);
+        }
+
+        #play_button:hover .icon {
+            background-image: url("data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyNTBweCIgaGVpZ2h0PSIyNTBweCIgdmlld0JveD0iMCAwIDI1MCAyNTAiPgo8ZGVmcz4KPGxpbmVhckdyYWRpZW50IGlkPSJHcmFkaWVudF8xIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjEyNSIgeTE9IjAiIHgyPSIxMjUiIHkyPSIyNTAiIHNwcmVhZE1ldGhvZD0icGFkIj4KPHN0b3AgIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNGRkUwNDQiLz4KCjxzdG9wICBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNGRjQ5NTIiLz4KPC9saW5lYXJHcmFkaWVudD4KCjxnIGlkPSJMYXllcjBfMF9GSUxMIj4KPHBhdGggZmlsbD0idXJsKCNHcmFkaWVudF8xKSIgc3Ryb2tlPSJub25lIiBkPSIKTSAyNTAgMTI1ClEgMjUwIDczLjIgMjEzLjM1IDM2LjYgMTc2LjggMCAxMjUgMCA3My4yIDAgMzYuNjUgMzYuNiAwIDczLjIgMCAxMjUgMCAxNzYuOCAzNi42NSAyMTMuMzUgNzMuMiAyNTAgMTI1IDI1MCAxNzYuOCAyNTAgMjEzLjM1IDIxMy4zNSAyNTAgMTc2LjggMjUwIDEyNQpNIDg3IDE5NQpMIDg3IDU1IDE4NyAxMjUgODcgMTk1IFoiLz4KCjxwYXRoIGZpbGw9IiNGRkZGRkYiIHN0cm9rZT0ibm9uZSIgZD0iCk0gODcgNTUKTCA4NyAxOTUgMTg3IDEyNSA4NyA1NSBaIi8+CjwvZz4KPC9kZWZzPgoKPGcgdHJhbnNmb3JtPSJtYXRyaXgoIDEsIDAsIDAsIDEsIDAsMCkgIj4KPHVzZSB4bGluazpocmVmPSIjTGF5ZXIwXzBfRklMTCIvPgo8L2c+Cjwvc3ZnPgo=");
+        }
     </style>
     <style id="dynamic_styles"></style>
-    <canvas id="player"></canvas>
+
+    <div id="container">
+        <div id="play_button"><div class="icon"></div></div>
+        <canvas id="player"></canvas>
+    </div>
 `;
 
 export default ruffle_shadow_tmpl;
\ No newline at end of file
diff --git a/web/src/lib.rs b/web/src/lib.rs
index 52b1d940f..f1e6d922b 100644
--- a/web/src/lib.rs
+++ b/web/src/lib.rs
@@ -59,6 +59,16 @@ impl Ruffle {
         Ruffle::new_internal(canvas, swf_data).map_err(|_| "Error creating player".into())
     }
 
+    pub fn play(&mut self) {
+        // Remove instance from the active list.
+        INSTANCES.with(|instances| {
+            let mut instances = instances.borrow_mut();
+            let instance = instances.get_mut(self.0).unwrap();
+            instance.core.lock().unwrap().set_is_playing(true);
+            log::info!("PLAY!");
+        });
+    }
+
     pub fn destroy(&mut self) -> Result<(), JsValue> {
         // Remove instance from the active list.
         if let Some(instance) = INSTANCES.with(|instances| {
@@ -180,7 +190,6 @@ impl Ruffle {
                         let mut instances = instances.borrow_mut();
                         if let Some(instance) = instances.get_mut(index) {
                             instance.has_focus = true;
-                            instance.core.lock().unwrap().set_is_playing(true);
                             if let Some(target) = js_event.current_target() {
                                 let _ = target
                                     .unchecked_ref::<Element>()
diff --git a/web/src/render.rs b/web/src/render.rs
index 1e58c7a7c..4ff56aac1 100644
--- a/web/src/render.rs
+++ b/web/src/render.rs
@@ -613,15 +613,8 @@ impl RenderBackend for WebCanvasRenderBackend {
     fn draw_pause_overlay(&mut self) {
         let width = f64::from(self.canvas.width());
         let height = f64::from(self.canvas.height());
-        self.context.set_fill_style(&"rgba(0, 0, 0, 0.5)".into());
+        self.context.set_fill_style(&"rgba(0, 0, 0, 1.0)".into());
         self.context.fill_rect(0.0, 0.0, width, height);
-        self.context.set_text_align("center");
-        self.context.set_fill_style(&"white".into());
-        self.context
-            .set_font(&format!("bold {}px sans-serif", height * 0.1));
-        let _ = self
-            .context
-            .fill_text("Click to Play", width / 2.0, height / 2.0);
     }
 
     fn draw_letterbox(&mut self, letterbox: Letterbox) {