Adding a video modal.

Author: travist

_config.yml

@@ -13,6 +13,10 @@ copyright: © My Company 2013
 # Build settings
 markdown: kramdown
 
+# The video that plays.
+video: "u7deClndzQw"
+
+# The navigation.
 navigation:
   left:
     links:
@@ -31,6 +35,7 @@ navigation:
   right:
     content: nav/right.html
 
+# The footer section.
 footer:
   sections:
     - title: Useful Links 1

_includes/header/index.html

@@ -1,3 +1,7 @@
 <h1>Hello, world!</h1>
 <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
-<p><a href="/about/" class="btn btn-primary btn-lg" role="button">Learn more »</a></p>
+<p>
+  <a href="/about/" class="btn btn-primary btn-lg" role="button">Learn more »</a>
+  <a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#video-modal"><span class="glyphicon glyphicon-play-circle"></span> Watch Video</a>
+  {% include modal.html id='video' title='Amazing Video' body='modals/video.html' %}
+</p>

_includes/modal.html

@@ -0,0 +1,20 @@
+<div class="modal fade" id="{{ include.id }}-modal" tabindex="-1" role="dialog" aria-labelledby="{{ include.id }}ModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-lg">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+        <h4 class="modal-title" id="{{ include.id }}ModalLabel">{{ include.title }}</h4>
+      </div>
+      {% if include.body %}
+        <div class="modal-body">
+          {% include {{ include.body }} %}
+        </div>
+      {% endif %}
+      {% if include.footer %}
+        <div class="modal-footer">
+          {% include {{ include.footer }} %}
+        </div>
+      {% endif %}
+    </div>
+  </div>
+</div>

_includes/modals/video.html

@@ -0,0 +1,4 @@
+<script type="text/template" id="video-template">
+  <iframe src="//www.youtube.com/embed/{{ site.video }}" frameborder="0" allowfullscreen></iframe>
+</script>
+<div class="embed-responsive embed-responsive-16by9"></div>

js/app.js

@@ -1 +1,16 @@
 /** Your custom JavaScript goes here. **/
+(function($) {
+  $(function() {
+
+    // Handle the video modal.
+    $('#video-modal').on('shown.bs.modal', function(event) {
+
+      // Load the video.
+      $('.modal-body .embed-responsive', this).append($('#video-template').html());
+    }).on('hidden.bs.modal', function(event) {
+
+      // Remove the video
+      $('.modal-body .embed-responsive iframe', this).remove();
+    });
+  });
+})(jQuery);