From 619bc033bc52c7e3fb0723ef4e83aba41e5d30ec Mon Sep 17 00:00:00 2001
From: Brett Smith <brett@sfconservancy.org>
Date: Sat, 31 Dec 2016 15:19:59 -0500
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>.
---
 .../static/css/conservancy-bigscreen.css            |  4 ++--
 www/conservancy/static/css/conservancy.css          |  8 ++++++++
 www/conservancy/static/js/conservancy.js            | 13 +++++++++++++
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/www/conservancy/static/css/conservancy-bigscreen.css b/www/conservancy/static/css/conservancy-bigscreen.css
index d6ab5213..63de2ef6 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 933280ec..0205f1c0 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 2c1bc932..0bd49b51 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, ""));