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>.

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%;

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;
+}

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, ""));