diff --git a/app/assets/stylesheets/player/player.css.sass b/app/assets/stylesheets/player/player.css.sass
index adaa9ce..1d72597 100644
--- a/app/assets/stylesheets/player/player.css.sass
+++ b/app/assets/stylesheets/player/player.css.sass
@@ -18,6 +18,9 @@ $color5: #edc951
   right: 0
   bottom: 0
 
+body.iframe
+  background-color: transparent
+
 .player
   // float: left;
   display: block
diff --git a/app/controllers/asciicasts_controller.rb b/app/controllers/asciicasts_controller.rb
index a92b81c..e895f8c 100644
--- a/app/controllers/asciicasts_controller.rb
+++ b/app/controllers/asciicasts_controller.rb
@@ -6,7 +6,7 @@ class AsciicastsController < ApplicationController
   before_filter :ensure_authenticated!, :only => [:edit, :update, :destroy]
   before_filter :ensure_owner!, :only => [:edit, :update, :destroy]
 
-  respond_to :html, :json
+  respond_to :html, :json, :js
 
   def index
     @asciicasts = PaginatingDecorator.new(
@@ -41,6 +41,10 @@ class AsciicastsController < ApplicationController
           respond_with AsciicastJSONDecorator.new(@asciicast)
         end
       end
+
+      format.js do
+        respond_with @asciicast
+      end
     end
   end
 
diff --git a/app/views/asciicasts/raw.html.erb b/app/views/asciicasts/raw.html.erb
index c2ff8c7..f8ddfa3 100644
--- a/app/views/asciicasts/raw.html.erb
+++ b/app/views/asciicasts/raw.html.erb
@@ -1 +1,11 @@
 <%= player @asciicast %>
+<script>
+  $(function() {
+    var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
+    if (typeof target != "undefined" && window !== window.parent) {
+      var w = $('.player').css('width');
+      var h = $('.player').css('height');
+      target.postMessage(['asciicast:size', { id: <%= @asciicast.id %>, width: w, height: h }], '*');
+    }
+  });
+</script>
diff --git a/app/views/asciicasts/show.js.erb b/app/views/asciicasts/show.js.erb
new file mode 100644
index 0000000..9309bb9
--- /dev/null
+++ b/app/views/asciicasts/show.js.erb
@@ -0,0 +1,21 @@
+// ascii.io - embeddable widget
+
+(function() {
+  function receiveSize(e) {
+    if (e.origin === document.location.protocol + "//<%= request.host %>") {
+      var event = e.data[0];
+      var data  = e.data[1];
+      if (event == 'asciicast:size' && data.id == <%= @asciicast.id %>) {
+        var player = document.getElementById("asciicast-player-<%= @asciicast.id %>");
+        if (player) {
+          player.style.width  = data.width;
+          player.style.height = data.height;
+        }
+      }
+    }
+  }
+
+  window.addEventListener("message", receiveSize, false);
+
+  document.writeln('<div class="asciicast" style="display: block; float: none; overflow: hidden"><iframe src="http://<%= request.host_with_port %>/a/<%= @asciicast.id %>/raw" name="asciicast-player-<%= @asciicast.id %>" id="asciicast-player-<%= @asciicast.id %>" width="600" height="300" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" style="display: block; float: none; visibility: hidden;" onload="this.style.visibility=\'visible\';"></iframe></div>');
+})();
diff --git a/app/views/layouts/raw.html.erb b/app/views/layouts/raw.html.erb
deleted file mode 100644
index ecad73b..0000000
--- a/app/views/layouts/raw.html.erb
+++ /dev/null
@@ -1,25 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title><%= page_title %></title>
-
-    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
-    <!--[if lt IE 9]>
-      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
-    <![endif]-->
-
-    <%= stylesheet_link_tag "player", :media => "all" %>
-    <%= javascript_include_tag "application" %>
-    <%= javascript_include_tag "player" %>
-
-    <script>
-      window.unpackWorkerPath = '<%= javascript_path "unpack_worker" %>';
-      window.mainWorkerPath = '<%= javascript_path "main_worker" %>';
-    </script>
-  </head>
-
-  <body>
-    <%= yield %>
-  </body>
-</html>
diff --git a/app/views/layouts/raw.html.slim b/app/views/layouts/raw.html.slim
new file mode 100644
index 0000000..097b8e4
--- /dev/null
+++ b/app/views/layouts/raw.html.slim
@@ -0,0 +1,13 @@
+doctype html
+html[lang="en"]
+  head
+    meta[charset="utf-8"]
+    title = page_title
+    = stylesheet_link_tag "player", :media => "all"
+    = javascript_include_tag "application"
+    = javascript_include_tag "player"
+    script
+      | window.unpackWorkerPath = '#{javascript_path "unpack_worker"}';
+        window.mainWorkerPath = '#{javascript_path "main_worker"}';
+  body.iframe
+    = yield
