Stop Kickstarter video if modal is dismissed

diff --git a/src/_includes/modals/kickstarter.html b/src/_includes/modals/kickstarter.html
index 5e2352918dd5b426152716cd3d8abfbd33d12a98..01995127f00f5c57751ae910062b066dc3a79aab 100644 (file)
--- a/src/_includes/modals/kickstarter.html
+++ b/src/_includes/modals/kickstarter.html
@@ -1,5 +1,4 @@
-<div class="modal fade" id="modal-kickstarter" tabindex="-1" role="dialog" aria-labelledby="modal-kickstarter-label"
-     xmlns="http://www.w3.org/1999/html">
+<div class="modal" id="modal-kickstarter" tabindex="-1" role="dialog" aria-labelledby="modal-kickstarter-label">
   <div class="modal-dialog modal-lg" role="document">
     <div class="modal-content">
       <div class="modal-header">
@@ -9,7 +8,9 @@
       <div class="modal-body">
 
         <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
-        <div class='embed-container'><iframe src='https://www.kickstarter.com/projects/232193852/font-awesome-5/widget/video.html' frameborder='0' allowfullscreen></iframe></div>
+        <div class='embed-container'>
+          <iframe id="kickstarter-iframe" src="https://www.kickstarter.com/projects/232193852/font-awesome-5/widget/video.html" frameborder="0" scrolling="no" allowfullscreen></iframe>
+        </div>
 
         <a class="btn btn-kickstarter btn-lg btn-block margin-top" href="http://five.fontawesome.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=kickstarter_modal&utm_campaign=promo_4.7_update"
            onClick="_gaq.push(['_trackEvent', 'Outbound Modal Link', 'Check out the Kickstarter']);">

diff --git a/src/assets/js/site.js b/src/assets/js/site.js
index f92d2fa509cef250bb4aa7143961da1a622beb4a..d8964483d5789820b2d38eb08e02c897aed50f7e 100644 (file)
--- a/src/assets/js/site.js
+++ b/src/assets/js/site.js
@@ -55,8 +55,14 @@ $(function () {
 
   $('[data-toggle="tooltip"]').tooltip();
   $('[data-toggle="popover"]').popover();
+
   if (storageAvailable('localStorage') && !localStorage.seenKickstarterModal) {
-    $('#modal-kickstarter').modal('toggle');
+    $('#modal-kickstarter')
+      .modal('toggle')
+      .on('hidden.bs.modal', function (e) {
+        $('#kickstarter-iframe').remove();
+      });
+    ;
   }
 
   if (storageAvailable('localStorage')) {