diff --git a/app/assets/images/icons/mejs-controls.svg b/app/assets/images/icons/mejs-controls.svg
new file mode 100644
index 0000000..db1938e
--- /dev/null
+++ b/app/assets/images/icons/mejs-controls.svg
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <symbol id="icon-captions" viewBox="0 0 18 14" xmlns="http://www.w3.org/2000/svg">
+        <g fill="#fff">
+            <path d="M-.67-4.08h14a2,2,0,0,1,2,2v10a2,2,0,0,1-2,2h-14a2,2,0,0,1-2-2v-10A2,2,0,0,1-.67-4.08Z" transform="translate(2.67 4.08)"/>
+        </g>
+        <g fill="#000">
+            <path d="M2.88,6.67a2.81,2.81,0,0,1-2.1-1A3.91,3.91,0,0,1,.88.87c.5-.6,2-1.7,4.6.2l-.6.8c-1.4-1-2.6-1.1-3.3-.3a3,3,0,0,0-.1,3.5c.7.9,1.9.8,3.4-.1l.5.9a5.28,5.28,0,0,1-2.5.8Zm7.5,0a2.81,2.81,0,0,1-2.1-1,3.91,3.91,0,0,1,.1-4.8c.5-.6,2-1.7,4.6.2l-.5.8c-1.4-1-2.6-1.1-3.3-.3a3,3,0,0,0-.1,3.5c.7.9,1.9.8,3.4-.1l.5.9a6.07,6.07,0,0,1-2.6.8Z" transform="translate(2.67 4.08)"/>
+        </g>
+    </symbol>
+    <symbol id="icon-chapters" viewBox="0 0 16.6 13" xmlns="http://www.w3.org/2000/svg"><path d="M1.5,0A1.54,1.54,0,0,1,3,1.5,1.54,1.54,0,0,1,1.5,3,1.54,1.54,0,0,1,0,1.5,1.47,1.47,0,0,1,1.5,0ZM6.6,0h8.5a1.47,1.47,0,0,1,1.5,1.5A1.54,1.54,0,0,1,15.1,3H6.6A1.47,1.47,0,0,1,5.1,1.5,1.37,1.37,0,0,1,6.6,0ZM1.5,5A1.54,1.54,0,0,1,3,6.5,1.54,1.54,0,0,1,1.5,8,1.54,1.54,0,0,1,0,6.5,1.47,1.47,0,0,1,1.5,5ZM6.6,5h8.5a1.47,1.47,0,0,1,1.5,1.5A1.54,1.54,0,0,1,15.1,8H6.6A1.47,1.47,0,0,1,5.1,6.5,1.37,1.37,0,0,1,6.6,5ZM1.5,10a1.5,1.5,0,0,1,0,3A1.54,1.54,0,0,1,0,11.5,1.47,1.47,0,0,1,1.5,10Zm5.1,0h8.5a1.47,1.47,0,0,1,1.5,1.5A1.54,1.54,0,0,1,15.1,13H6.6a1.47,1.47,0,0,1-1.5-1.5A1.37,1.37,0,0,1,6.6,10Z"/></symbol>
+    <symbol id="icon-fullscreen" viewBox="0 0 17.8 17.8" xmlns="http://www.w3.org/2000/svg"><path d="M0,1A.94.94,0,0,1,1,0H6.4c.6,0,.7.3.3.7l-6,6C.3,7.1,0,7,0,6.4ZM0,16.8a.94.94,0,0,0,1,1H6.4c.6,0,.7-.3.3-.7l-6-6c-.4-.4-.7-.3-.7.3ZM17.8,1a.94.94,0,0,0-1-1H11.4c-.6,0-.7.3-.3.7l6,6c.4.4.7.3.7-.3Zm0,15.8a.94.94,0,0,1-1,1H11.4c-.6,0-.7-.3-.3-.7l6-6c.4-.4.7-.3.7.3Z"/></symbol>
+    <symbol id="icon-unfullscreen" viewBox="0 0 17.8 17.8" xmlns="http://www.w3.org/2000/svg"><path d="M11.74,4.64a.94.94,0,0,0,1,1h4.1c.6,0,.7-.3.3-.7L12.44.24c-.4-.4-.7-.3-.7.3Zm-7.1,1a.94.94,0,0,0,1-1V.54c0-.6-.3-.7-.7-.3L.24,4.94c-.4.4-.3.7.3.7Zm1,7.1a.94.94,0,0,0-1-1H.54c-.6,0-.7.3-.3.7l4.7,4.7c.4.4.7.3.7-.3Zm7.1-1a.94.94,0,0,0-1,1v4.1c0,.5.3.7.7.3l4.7-4.7c.4-.4.3-.7-.3-.7Z"/></symbol>
+    <symbol id="icon-mute" viewBox="0 0 17.55 17.03" xmlns="http://www.w3.org/2000/svg">
+        <g stroke="none">
+            <path d="M6.21,4.36a3,3,0,0,1-1.8.6H1.21a.94.94,0,0,0-1,1v5.7a.94.94,0,0,0,1,1h4.2c.3.2.5.4.8.6l3.5,2.6a.47.47,0,0,0,.8-.4V2.06a.47.47,0,0,0-.8-.4Z"/>
+        </g>
+        <g fill="none" stroke-linecap="round" stroke-width="1.5px">
+            <path d="M13.11,1.18S17,.38,17,8.88s-3.9,7.8-3.9,7.8"/>
+            <path d="M11.81,5.08s2.6-.4,2.6,3.8-2.6,3.9-2.6,3.9"/>
+        </g>
+    </symbol>
+    <symbol id="icon-unmute" viewBox="0 0 18.2 17" xmlns="http://www.w3.org/2000/svg">
+        <g stroke="none">
+            <path d="M6.21,4.36a3,3,0,0,1-1.8.6H1.21a.94.94,0,0,0-1,1v5.7a.94.94,0,0,0,1,1h4.2c.3.2.5.4.8.6l3.5,2.6a.47.47,0,0,0,.8-.4V2.06a.47.47,0,0,0-.8-.4Z"/>
+        </g>
+        <g fill="none" stroke-linecap="round" stroke-width="2px">
+            <path d="M12,5.55l5.4,5.4M12,11l5.4-5.4"/>
+        </g>
+    </symbol>
+    <symbol id="icon-play" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M16.5 8.5c.3.1.4.5.2.8-.1.1-.1.2-.2.2l-11.4 7c-.5.3-.8.1-.8-.5V2c0-.5.4-.8.8-.5l11.4 7z"/></symbol>
+    <symbol id="icon-pause" viewBox="0 0 14 16" xmlns="http://www.w3.org/2000/svg"><path d="M1,0H3.2a.94.94,0,0,1,1,1V15a.94.94,0,0,1-1,1H1a.94.94,0,0,1-1-1V1A1,1,0,0,1,1,0Zm9.8,0H13a.94.94,0,0,1,1,1V15a.94.94,0,0,1-1,1H10.8a.94.94,0,0,1-1-1V1A1,1,0,0,1,10.8,0Z"/></symbol>
+    <symbol id="icon-replay" viewBox="0 0 17.52 15.97" xmlns="http://www.w3.org/2000/svg"><path d="M16.7,7.27a.81.81,0,0,1-.9.7c-.1,0-.2,0-.2-.1l-4.9-1.8c-.5-.2-.6-.6-.1-.8l6.2-3.6c.5-.3.8-.1.7.5l-.8,5.1Z"/><path d="M8.1,13.77a5.92,5.92,0,0,1-2.9-.7A5.77,5.77,0,0,1,2,7.87a6.21,6.21,0,0,1,6.3-6A6.15,6.15,0,0,1,13.9,6l.1-.1L16.1,7A8.1,8.1,0,0,0,7,.07,8.24,8.24,0,0,0,0,8a8.06,8.06,0,0,0,4.3,7,10.21,10.21,0,0,0,3.8,1,8.24,8.24,0,0,0,6.6-3.3l-1.8-.9a7,7,0,0,1-4.8,2Z"/></symbol>
+    <symbol id="icon-overlay-play" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
+        <g fill="#333" stroke="#fff" stroke-width="5px">
+            <path d="M2.5,40A37.5,37.5,0,1,1,40,77.5,37.51,37.51,0,0,1,2.5,40Z"/>
+        </g>
+        <g fill="#fff">
+            <path d="M60.3,38a1,1,0,0,1,.6,1.4.9.9,0,0,1-.6.6L30,57.5c-1,.6-1.7.1-1.7-1v-35c0-1.1.8-1.5,1.7-1Z"/>
+        </g>
+    </symbol>
+    <symbol id="icon-loading-spinner" viewBox="0 0 75.8 77.9" xmlns="http://www.w3.org/2000/svg">
+        <g fill="#fff">
+            <circle cx="38.8" cy="8.1" r="8.1"/>
+            <g opacity="0.4">
+                <circle cx="70.8" cy="40" r="5"/>
+            </g>
+            <g opacity="0.6">
+                <circle cx="38.8" cy="71.9" r="6"/>
+            </g>
+            <g opacity="0.8">
+                <circle cx="7" cy="40" r="7"/>
+            </g>
+            <g opacity="0.9">
+                <circle cx="15.1" cy="17.3" r="7.5"/>
+            </g>
+            <g opacity="0.3">
+                <circle cx="63.2" cy="17.1" r="4.5"/>
+            </g>
+            <g opacity="0.5">
+                <circle cx="62.7" cy="63.8" r="5.5"/>
+            </g>
+            <g opacity="0.7">
+                <circle cx="15.1" cy="63.8" r="6.5"/>
+            </g>
+        </g>
+    </symbol>
+</svg>
diff --git a/app/assets/stylesheets/includes/main.scss b/app/assets/stylesheets/includes/main.scss
index 09b1ebb..e2f0870 100644
--- a/app/assets/stylesheets/includes/main.scss
+++ b/app/assets/stylesheets/includes/main.scss
@@ -335,6 +335,18 @@ audio {
   width: 100%;
 }
 
+/// additional MediaElement.js styles
+
+.mejs__overlay-button {
+  background-image: url("/assets/icons/mejs-controls.svg");
+}
+.mejs__overlay-loading-bg-img {
+  background-image: url("/assets/icons/mejs-controls.svg");
+}
+.mejs__button > button {
+  background-image: url("/assets/icons/mejs-controls.svg");
+}
+
 // ////////////////////////////////////////////////////////////
 // Tables
 
diff --git a/app/views/player/_player_head_additional.erb b/app/views/player/_player_head_additional.erb
index c32d477..5144634 100644
--- a/app/views/player/_player_head_additional.erb
+++ b/app/views/player/_player_head_additional.erb
@@ -32,6 +32,6 @@
           $("source,track").each(rewrite_src);
       }
   </script>
-  <script src="https://cdn.jsdelivr.net/npm/mediaelement@4.2.16/build/mediaelement-and-player.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mediaelement@4.2.16/build/mediaelementplayer.css">
+  <script src="https://cdn.jsdelivr.net/npm/mediaelement@7.0.5/build/mediaelement-and-player.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mediaelement@7.0.5/build/mediaelementplayer.css">
 <% end %>
diff --git a/app/views/player/_video.html.erb b/app/views/player/_video.html.erb
index 995adf8..110d647 100644
--- a/app/views/player/_video.html.erb
+++ b/app/views/player/_video.html.erb
@@ -1,6 +1,6 @@
 <%# 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" class="mejs__player" preload="<%= preload %>" controls>
+<video id="video-<%= index %>" width="100%" height="270" class="mejs__player" preload="<%= preload %>" data-mejsoptions='{"iconSprite": "/assets/icons/mejs-controls.svg"}' controls>
   <% if browser.platform.ios? || browser.device.ipad? %>
     <source src="<%= track.hls_uri %>" type="<%= BerkeleyLibrary::AV::Track::SOURCE_TYPE_HLS %>"/>
   <% else %>