From 619bc033bc52c7e3fb0723ef4e83aba41e5d30ec 2016-12-31 20:19:59
From: Brett Smith <brett@sfconservancy.org>
Date: 2016-12-31 20:19:59
Subject: [PATCH] js: Render <video> inner HTML when no source is supported.

The HTML inside <video> is meant to be rendered by browsers that don't
support the tag at all.  You have to respond to the JavaScript error event
to deal with browsers that support video, but no available source.  See
<https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video#Showing_fallback_content_when_no_source_could_be_decoded>.

---

diff --git a/www/conservancy/static/css/conservancy-bigscreen.css b/www/conservancy/static/css/conservancy-bigscreen.css
index d6ab5213928ecb9a615bef0b8cedd74bdde8cf5c..63de2ef628c3e2b27d3809e684eaea25d8626247 100644
--- a/www/conservancy/static/css/conservancy-bigscreen.css
+++ b/www/conservancy/static/css/conservancy-bigscreen.css
@@ -50,7 +50,7 @@ dd {
     margin: 0 0 2.5em 11.5em;
 }
 
-video.small-right {
+.small-right {
     float: right;
     height: auto;
     width: 25%;
@@ -58,7 +58,7 @@ video.small-right {
     margin-bottom: .4em;
 }
 
-video.medium-right {
+.medium-right {
     float: right;
     height: auto;
     width: 50%;
diff --git a/www/conservancy/static/css/conservancy.css b/www/conservancy/static/css/conservancy.css
index 933280ec891cb6ea14b3ef574edd2388df5ecec1..0205f1c007436c27cf8808374ae04350873f2a40 100644
--- a/www/conservancy/static/css/conservancy.css
+++ b/www/conservancy/static/css/conservancy.css
@@ -452,3 +452,11 @@ dd {
 .fundraiser-top-text em {
     font-size: 110%;
 }
+
+/* Fallback elements created by conservancy.js when no video source is
+   supported. */
+div.small-right, div.medium-right {
+    border: thick solid #577632;
+    padding: .3em;
+    text-align: center;
+}
diff --git a/www/conservancy/static/js/conservancy.js b/www/conservancy/static/js/conservancy.js
index 2c1bc9327f0ba908bbcf9e164000dd25f60ac6f1..0bd49b515136f88858f087cbc4f7de34d347b67e 100644
--- a/www/conservancy/static/js/conservancy.js
+++ b/www/conservancy/static/js/conservancy.js
@@ -6,6 +6,19 @@
 */
 
 $(document).ready(function() {
+    /* When the browser doesn't support any video source, replace it
+       with the HTML inside the <video> element. */
+    var showVideoInnerHTML = function(event) {
+        var video = event.target.parentNode;
+        var div = document.createElement('div');
+        div.classList = video.classList;
+        div.innerHTML = video.innerHTML;
+        video.parentNode.replaceChild(div, video);
+    }
+    $('video').each(function(index, video) {
+        $('source', video).last().on('error', showVideoInnerHTML);
+    });
+
     /* Set up the fundraiser multiprogressbar near the top of each page. */
     var siteFinalGoal = $('span#site-fundraiser-final-goal').text();
     var noCommaSiteFinalGoal = parseInt(siteFinalGoal.replace(/,/g, ""));