Fix media player caption font and move to bottom

fixes LS-1742
flag = rce_enhancements

Test plan:
  - Edit something in the new RCE
  - Upload a video and add captions (or find an existing captioned
    video somewhere)
  - Play the video and ensure that captions appear at the bottom of
    the player and are displayed with a sans-serif font
  - View the video outside of the RCE and ensure that this is still
    true

Change-Id: Ide57770c34abb84655ed2a2bfd55e38b37d42922
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/256192
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Ed Schiebel <eschiebel@instructure.com>
QA-Review: Ed Schiebel <eschiebel@instructure.com>
Product-Review: Jeff Largent <jeff.largent@instructure.com>

app/jsx/shared/media/CanvasMediaPlayer.js

@@ -201,6 +201,7 @@ export default function CanvasMediaPlayer(props) {
           tracks={props.media_tracks}
           hideFullScreen={!includeFullscreen}
           onLoadedMetadata={handleLoadedMetadata}
+          captionPosition="bottom"
         />
       ) : (
         renderNoPlayer()

app/stylesheets/bundles/media_player.scss

@@ -18,6 +18,10 @@
 
 @import 'base/environment';
 
+#player_container {
+  font-family: $ic-font-family;
+}
+
 .audio-player {
   background-color: $lightBackground;
   background-repeat: no-repeat;