youtube embeds

app/stylesheets/application.scss

@@ -199,7 +199,18 @@ form {
   @include leader;
 }
 
-.step_embed, .step_embed .embed, .step_embed .embed iframe {
+.tale_embed, .tale_embed .embed, .tale_embed .embed iframe, .step_embed, .step_embed .embed, .step_embed .embed iframe {
   @include clearfix();
   @include box-sizing(border-box);
 }
+
+.tale_embed {
+  width: 100%;
+  .embed {
+    width: 100%;
+    text-align: center;
+  }
+  frame {
+    margin: auto !important;
+  }
+}

app/views/tales/_form.haml

@@ -4,9 +4,13 @@
 %div
   = f.label "Where it is set, roughly (the town or city)"
   = f.text_field :where
+%div
+  = f.label "A URL to a video, photo, or audio file that summarises this tale"
+  = f.text_field :embed_url
 %div
   = f.label "Describe what happens in the story - why should someone experience it?"
   ~ f.text_area :description
+
 %div
   = f.label "What should the player do to start the game? Go to a particular place perhaps?"
   ~ f.text_area :start_the_game

app/views/tales/show.haml

@@ -12,6 +12,9 @@
       - if @tale.account == current_account
         = link_to "Manage the steps that make up this tale", url_for(:tales, :manage, :slug => @tale.slug), :class => "btn"
   #description    
+    - unless @tale.embed_url.blank?
+      .tale_embed
+        %a{:href=> @tale.embed_url}
     = simple_format @tale.description
 
   - if @tale.steps.blank?

models/tale.rb

@@ -7,6 +7,7 @@ class Tale
   field :where, :type => String
   field :description, :type => String
   field :start_the_game, :type => String
+  field :embed_url, :type => String
 
   has_many :steps
   belongs_to :account

public/javascripts/app.js

@@ -1,3 +1,3 @@
 $(function() {
-  $(".step_embed").embedly({key:':3ac13794740911e1ab094040d3dc5c07'});
+  $(".tale_embed, .step_embed").embedly({key:':3ac13794740911e1ab094040d3dc5c07'});
 });

public/stylesheets/application.css

@@ -361,10 +361,24 @@ form button, form .btn {
 }
 
 /* line 202, ../../app/stylesheets/application.scss */
-.step_embed, .step_embed .embed, .step_embed .embed iframe {
+.tale_embed, .tale_embed .embed, .tale_embed .embed iframe, .step_embed, .step_embed .embed, .step_embed .embed iframe {
   overflow: hidden;
   *zoom: 1;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
+
+/* line 207, ../../app/stylesheets/application.scss */
+.tale_embed {
+  width: 100%;
+}
+/* line 209, ../../app/stylesheets/application.scss */
+.tale_embed .embed {
+  width: 100%;
+  text-align: center;
+}
+/* line 213, ../../app/stylesheets/application.scss */
+.tale_embed frame {
+  margin: auto !important;
+}