diff --git a/app/helpers/asciicasts_helper.rb b/app/helpers/asciicasts_helper.rb
index 89e90e2..a0ed867 100644
--- a/app/helpers/asciicasts_helper.rb
+++ b/app/helpers/asciicasts_helper.rb
@@ -1,7 +1,7 @@
 module AsciicastsHelper
 
   def player(asciicast, options = PlaybackOptions.new)
-    render 'asciicasts/player', asciicast: serialized_asciicast(asciicast),
+    render 'asciicasts/player', asciicast: AsciicastSerializer.new(asciicast),
                                 options:   options
   end
 
@@ -17,10 +17,6 @@ module AsciicastsHelper
 
   private
 
-  def serialized_asciicast(asciicast)
-    AsciicastSerializer.new(asciicast).to_json
-  end
-
   def translate_asset_paths(css)
     css.gsub(/['"]\/assets\/(.+?)(-\w{32})?\.(.+?)['"]/) { |m|
       path = assets.find_asset("#{$1}.#{$3}").pathname
diff --git a/app/views/asciicasts/_player.html.slim b/app/views/asciicasts/_player.html.erb
similarity index 59%
rename from app/views/asciicasts/_player.html.slim
rename to app/views/asciicasts/_player.html.erb
index 6249943..7650e71 100644
--- a/app/views/asciicasts/_player.html.slim
+++ b/app/views/asciicasts/_player.html.erb
@@ -1,24 +1,25 @@
-.player
+<div class="player"></div>
 
-p.processing-info style="display: none"
-  | This recording is being pre-processed at the moment. It will open automatically in a few seconds.
+<p class="processing-info" style="display: none">
+  This recording is being pre-processed at the moment. It will open automatically in a few seconds.
+</p>
 
-javascript:
+<script>
   $(function() {
-    var model = new Asciinema.Asciicast(#{asciicast.html_safe});
+    var model = new Asciinema.Asciicast(<%= asciicast.to_json.gsub('</', '<\/').html_safe %>);
 
     function createPlayer() {
-      var source = new asciinema.HttpArraySource(model.get('stdout_frames_url'), #{options.speed});
+      var source = new asciinema.HttpArraySource(model.get('stdout_frames_url'), <%= options.speed %>);
       var snapshot = model.get('snapshot');
       var movie = new asciinema.Movie(model.get('width'), model.get('height'), source, snapshot, model.get('duration'));
 
       React.renderComponent(
         asciinema.Player({
-          fontSize: '#{options.size}',
-          autoPlay: #{options.autoplay},
-          loop: #{options.loop},
+          fontSize: '<%= options.size %>',
+          autoPlay: <%= options.autoplay %>,
+          loop: <%= options.loop %>,
           movie: movie,
-          theme: '#{h options.theme}',
+          theme: '<%= h options.theme %>',
         }),
         $('.player')[0]
       );
@@ -38,3 +39,4 @@ javascript:
 
     tryCreatePlayer();
   });
+</script>