player: Ensure video retains consistent sizing

This ensures that cycling between full screen and non-full screen does
not cause any change of the positioning of the video nor its size.

By removing the video element CSS in main.scss, we can additionally
have a fully responsive video element that will be a nominal 600px for
the majority of our video content.  This can be explored later.

Closes: AP-339

Author: awilfox

app/assets/stylesheets/includes/main.scss

@@ -326,10 +326,22 @@ strong {
 */
 
 video {
-  height: 270px; /* MediaElement.js default height */
+  height: 270px !important; /* MediaElement.js default height */
   width: 100%;
 }
 
+.mejs__container {
+  height: 270px !important;
+}
+
+.mejs__container-fullscreen {
+  height: 100% !important;
+}
+
+.mejs__container-fullscreen video {
+  height: 100% !important;
+}
+
 audio {
   height: 40px;
   width: 100%;

app/views/player/_player_head_additional.erb

@@ -38,6 +38,7 @@
             // (when the HLS stream contains WebVTT captions)
             hls: { enableWebVTT: false },
             iconSprite: "/assets/icons/mejs-controls.svg",
+            stretching: 'responsive',
             success: function (mediaElement, originalNode, instance) {
                 if (typeof dashjs !== "undefined") {
                     // workaround for mediaelement/mediaelement#2964

app/views/player/_video.html.erb

@@ -1,6 +1,4 @@
-<%# TODO: figure out how to programmatically set height with JavaScript, or something %>
-<%# should match app/assets/stylesheets/application.scss %>
-<video id="video-<%= index %>" width="100%" height="270" preload="<%= preload %>" controls crossorigin="anonymous">
+<video id="video-<%= index %>" preload="<%= preload %>" controls crossorigin="anonymous">
   <% if browser.platform.ios? || browser.device.ipad? %>
     <source src="<%= track.hls_uri %>" type="<%= BerkeleyLibrary::AV::Track::SOURCE_TYPE_HLS %>"/>
     <%# a separate track tag is not necessary here for captions as Wowza sends them as part of the HLS stream, and iOS will auto discover them %>