From d06142e4201310313c6c03107495bc6628ce4ff2 Mon Sep 17 00:00:00 2001
From: Muhammad Farhan Khan <mfarhan133@gmail.com>
Date: Fri, 20 Sep 2024 17:53:25 +0500
Subject: [PATCH] chore: Remove css comments and format the files

---
 xmodule/assets/VideoBlockDisplay.css | 2051 ++++++++++++++------------
 xmodule/assets/VideoBlockEditor.css  |  282 ++--
 2 files changed, 1273 insertions(+), 1060 deletions(-)

diff --git a/xmodule/assets/VideoBlockDisplay.css b/xmodule/assets/VideoBlockDisplay.css
index a16a69754bdb..93c4b6adcec3 100644
--- a/xmodule/assets/VideoBlockDisplay.css
+++ b/xmodule/assets/VideoBlockDisplay.css
@@ -1,869 +1,1038 @@
 @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700");
-/* line 1, /openedx/edx-platform/xmodule/assets/VideoBlockDisplay.scss */
+
 .xmodule_display.xmodule_VideoBlock {
-  /* stylelint-disable-line */
-  /* stylelint-disable-line */
-  /* stylelint-disable-line */
-  /* stylelint-disable-line */
-  /* stylelint-disable-line */
-  /* stylelint-disable-line */ }
-  /* line 25, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-  .xmodule_display.xmodule_VideoBlock {
-    margin-bottom: calc((var(--baseline)*1.5)); }
-  /* line 29, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-  .xmodule_display.xmodule_VideoBlock .is-hidden, .xmodule_display.xmodule_VideoBlock .video.closed .subtitles {
-    display: none; }
-  /* line 33, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-  .xmodule_display.xmodule_VideoBlock .video {
+    /* stylelint-disable-line */
+    /* stylelint-disable-line */
+    /* stylelint-disable-line */
+    /* stylelint-disable-line */
+    /* stylelint-disable-line */
+    /* stylelint-disable-line */
+}
+
+.xmodule_display.xmodule_VideoBlock {
+    margin-bottom: calc((var(--baseline) * 1.5));
+}
+
+.xmodule_display.xmodule_VideoBlock .is-hidden, .xmodule_display.xmodule_VideoBlock .video.closed .subtitles {
+    display: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .video {
     background: whitesmoke;
     display: block;
     margin: 0 -12px;
     padding: 12px;
     border-radius: 5px;
-    outline: none; }
-    /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */
-    .xmodule_display.xmodule_VideoBlock .video:after {
-      content: "";
-      display: table;
-      clear: both; }
-    /* line 43, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-    .xmodule_display.xmodule_VideoBlock .video:focus, .xmodule_display.xmodule_VideoBlock .video:active, .xmodule_display.xmodule_VideoBlock .video:hover {
-      border: 0; }
-    /* line 51, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-    .xmodule_display.xmodule_VideoBlock .video.is-initialized .video-wrapper .spinner {
-      display: none; }
-    /* line 59, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-    .xmodule_display.xmodule_VideoBlock .video.is-pre-roll .slider {
-      visibility: hidden; }
-    /* line 63, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-    .xmodule_display.xmodule_VideoBlock .video.is-pre-roll .video-player {
-      position: relative; }
-      /* line 66, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-      .xmodule_display.xmodule_VideoBlock .video.is-pre-roll .video-player::before {
-        display: block;
-        content: "";
-        width: 100%;
-        padding-top: 55%; }
-    /* line 75, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-    .xmodule_display.xmodule_VideoBlock .video .tc-wrapper {
-      position: relative; }
-      /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */
-      .xmodule_display.xmodule_VideoBlock .video .tc-wrapper:after {
-        content: "";
-        display: table;
-        clear: both; }
-    /* line 81, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-    .xmodule_display.xmodule_VideoBlock .video .focus_grabber {
-      position: relative;
-      display: inline;
-      width: 0;
-      height: 0; }
-    /* line 88, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-    .xmodule_display.xmodule_VideoBlock .video .downloads-heading {
-      margin: 1em 0 0; }
-    /* line 92, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-    .xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section {
-      display: flex;
-      justify-content: space-between; }
-      /* line 96, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-      .xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section .wrapper-download-video,
-      .xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section .wrapper-download-transcripts,
-      .xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section .wrapper-handouts,
-      .xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section .branding,
-      .xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section .wrapper-transcript-feedback {
-        flex: 1;
-        margin-top: var(--baseline);
-        padding-right: var(--baseline);
-        vertical-align: top; }
-    @media (min-width: 768px) {
-      /* line 110, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-      .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads {
-        display: flex; } }
-    /* line 115, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-    .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .hd {
-      margin: 0; }
-    /* line 120, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-    .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-video .video-sources {
-      margin: 0; }
-    /* line 126, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-    .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-transcripts .list-download-transcripts {
-      margin: 0;
-      padding: 0;
-      list-style: none; }
-      /* line 131, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-      .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-transcripts .list-download-transcripts .transcript-option {
-        margin: 0; }
-        /* line 134, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-        .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-transcripts .list-download-transcripts .transcript-option a.btn, .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-transcripts .list-download-transcripts .transcript-option a.btn-link {
-          font-size: 16px !important;
-          font-weight: unset; }
-    /* line 142, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-    .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .branding {
-      padding-right: 0; }
-      /* line 145, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-      .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .branding .host-tag {
-        position: absolute;
-        left: -9999em;
-        display: inline-block;
-        vertical-align: middle;
-        color: var(--body-color); }
-      /* line 153, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-      .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .branding .brand-logo {
-        display: inline-block;
-        max-width: 100%;
-        max-height: calc((var(--baseline)*2));
-        padding: calc((var(--baseline)/4)) 0;
-        vertical-align: middle; }
-    /* line 164, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-    .xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback {
-      display: none; }
-      /* line 167, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-      .xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback .transcript-feedback-buttons {
-        display: flex; }
-      /* line 170, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-      .xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback .transcript-feedback-btn-wrapper {
-        margin-right: 10px; }
-      /* line 173, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-      .xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback .thumbs-up-btn,
-      .xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback .thumbs-down-btn {
-        border: none;
-        box-shadow: none;
-        background: transparent; }
-    /* line 181, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-    .xmodule_display.xmodule_VideoBlock .video .google-disclaimer {
-      display: none;
-      margin-top: var(--baseline);
-      padding-right: var(--baseline);
-      vertical-align: top; }
-    /* line 188, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-    .xmodule_display.xmodule_VideoBlock .video .video-wrapper {
-      float: left;
-      margin-right: 2.27273%;
-      width: 65.90909%;
-      background-color: black;
-      position: relative; }
-      /* line 197, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-      .xmodule_display.xmodule_VideoBlock .video .video-wrapper:hover .btn-play {
-        color: #0075b4; }
-      /* line 201, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-      .xmodule_display.xmodule_VideoBlock .video .video-wrapper:hover .btn-play::after {
-        background: #fff; }
-      /* line 206, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-      .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player-pre,
-      .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player-post {
-        height: 50px;
-        background-color: #111010; }
-      /* line 212, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-      .xmodule_display.xmodule_VideoBlock .video .video-wrapper .spinner {
-        transform: translate(-50%, -50%);
-        position: absolute;
-        z-index: 1;
-        background: rgba(0, 0, 0, 0.7);
-        top: 50%;
-        left: 50%;
-        padding: 30px;
-        border-radius: 25%; }
-        /* line 223, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .spinner::after {
-          animation: rotateCW 3s infinite linear;
-          content: '';
-          display: block;
-          width: 30px;
-          height: 30px;
-          border: 7px solid white;
-          border-top-color: transparent;
-          border-radius: 100%;
-          position: relative; }
-      /* line 237, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-      .xmodule_display.xmodule_VideoBlock .video .video-wrapper .btn-play {
-        transform: translate(-50%, -50%);
-        position: absolute;
-        z-index: 1;
-        top: 46%;
-        left: 50%;
-        font-size: 4em;
-        cursor: pointer;
-        opacity: 0.1; }
-        /* line 248, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .btn-play::after {
-          background: var(--white);
-          position: absolute;
-          width: 50%;
-          height: 50%;
-          content: '';
-          left: 0;
-          top: 0;
-          bottom: 0;
-          right: 0;
-          margin: auto;
-          z-index: -1; }
-      /* line 263, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-      .xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions {
-        left: 5%;
+    outline: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .video:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.xmodule_display.xmodule_VideoBlock .video:focus, .xmodule_display.xmodule_VideoBlock .video:active, .xmodule_display.xmodule_VideoBlock .video:hover {
+    border: 0;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.is-initialized .video-wrapper .spinner {
+    display: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.is-pre-roll .slider {
+    visibility: hidden;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.is-pre-roll .video-player {
+    position: relative;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.is-pre-roll .video-player::before {
+    display: block;
+    content: "";
+    width: 100%;
+    padding-top: 55%;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .tc-wrapper {
+    position: relative;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .tc-wrapper:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .focus_grabber {
+    position: relative;
+    display: inline;
+    width: 0;
+    height: 0;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .downloads-heading {
+    margin: 1em 0 0;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section {
+    display: flex;
+    justify-content: space-between;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section .wrapper-download-video,
+.xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section .wrapper-download-transcripts,
+.xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section .wrapper-handouts,
+.xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section .branding,
+.xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section .wrapper-transcript-feedback {
+    flex: 1;
+    margin-top: var(--baseline);
+    padding-right: var(--baseline);
+    vertical-align: top;
+}
+
+@media (min-width: 768px) {
+    .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads {
+        display: flex;
+    }
+}
+
+.xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .hd {
+    margin: 0;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-video .video-sources {
+    margin: 0;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-transcripts .list-download-transcripts {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-transcripts .list-download-transcripts .transcript-option {
+    margin: 0;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-transcripts .list-download-transcripts .transcript-option a.btn, .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-transcripts .list-download-transcripts .transcript-option a.btn-link {
+    font-size: 16px !important;
+    font-weight: unset;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .branding {
+    padding-right: 0;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .branding .host-tag {
+    position: absolute;
+    left: -9999em;
+    display: inline-block;
+    vertical-align: middle;
+    color: var(--body-color);
+}
+
+.xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .branding .brand-logo {
+    display: inline-block;
+    max-width: 100%;
+    max-height: calc((var(--baseline) * 2));
+    padding: calc((var(--baseline) / 4)) 0;
+    vertical-align: middle;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback {
+    display: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback .transcript-feedback-buttons {
+    display: flex;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback .transcript-feedback-btn-wrapper {
+    margin-right: 10px;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback .thumbs-up-btn,
+.xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback .thumbs-down-btn {
+    border: none;
+    box-shadow: none;
+    background: transparent;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .google-disclaimer {
+    display: none;
+    margin-top: var(--baseline);
+    padding-right: var(--baseline);
+    vertical-align: top;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper {
+    float: left;
+    margin-right: 2.27273%;
+    width: 65.90909%;
+    background-color: black;
+    position: relative;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper:hover .btn-play {
+    color: #0075b4;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper:hover .btn-play::after {
+    background: #fff;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player-pre,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player-post {
+    height: 50px;
+    background-color: #111010;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .spinner {
+    transform: translate(-50%, -50%);
+    position: absolute;
+    z-index: 1;
+    background: rgba(0, 0, 0, 0.7);
+    top: 50%;
+    left: 50%;
+    padding: 30px;
+    border-radius: 25%;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .spinner::after {
+    animation: rotateCW 3s infinite linear;
+    content: '';
+    display: block;
+    width: 30px;
+    height: 30px;
+    border: 7px solid white;
+    border-top-color: transparent;
+    border-radius: 100%;
+    position: relative;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .btn-play {
+    transform: translate(-50%, -50%);
+    position: absolute;
+    z-index: 1;
+    top: 46%;
+    left: 50%;
+    font-size: 4em;
+    cursor: pointer;
+    opacity: 0.1;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .btn-play::after {
+    background: var(--white);
+    position: absolute;
+    width: 50%;
+    height: 50%;
+    content: '';
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    margin: auto;
+    z-index: -1;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions {
+    left: 5%;
+    position: absolute;
+    width: 90%;
+    box-sizing: border-box;
+    top: 70%;
+    text-align: center;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible {
+    max-height: calc((var(--baseline) * 3));
+    border-radius: calc((var(--baseline) / 5));
+    padding: 8px calc((var(--baseline) / 2)) 8px calc((var(--baseline) * 1.5));
+    background: rgba(0, 0, 0, 0.75);
+    color: var(--yellow);
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible::before {
+    position: absolute;
+    display: inline-block;
+    top: 50%;
+    left: var(--baseline);
+    margin-top: -0.6em;
+    font-family: 'FontAwesome';
+    content: "\f142";
+    color: var(--white);
+    opacity: 0.5;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible:hover, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible.is-dragging {
+    background: black;
+    cursor: move;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible:hover::before, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible.is-dragging::before {
+    opacity: 1;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player {
+    overflow: hidden;
+    min-height: 158px;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player > div {
+    height: 100%;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player > div.hidden {
+    display: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player .video-error,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player .video-hls-error {
+    padding: calc((var(--baseline) / 5));
+    background: black;
+    color: white !important;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player object,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player iframe,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player video {
+    left: 0;
+    display: block;
+    border: none;
+    width: 100%;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player h4 {
+    text-align: center;
+    color: white;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player h4.hidden {
+    display: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls {
+    position: relative;
+    border: 0;
+    background: #282c2e;
+    color: #f0f3f5;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:hover ul,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:hover div, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:focus ul,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:focus div {
+    opacity: 1;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control {
+    display: inline-block;
+    vertical-align: middle;
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+    padding: calc((var(--baseline) / 2)) calc((var(--baseline) / 1.5));
+    background: #282c2e;
+    box-shadow: none;
+    text-shadow: none;
+    color: #cfd8dc;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control:hover, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control:focus {
+    background: #171a1b;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control:active, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .is-active.control, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .active.control {
+    color: #0ea6ec;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control .icon {
+    width: 1em;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control .icon.icon-hd {
+    width: auto;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider {
+    transform-origin: bottom left;
+    transition: height 0.7s ease-in-out 0s;
+    box-sizing: border-box;
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    height: calc((var(--baseline) / 4));
+    margin-left: 0;
+    border: 1px solid #4f595d;
+    border-radius: 0;
+    background: #4f595d;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-widget-header {
+    background: #8e3e63;
+    border: 1px solid #8e3e63;
+    box-shadow: none;
+    top: -1px;
+    left: -1px;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-corner-all.slider-range {
+    opacity: 0.3;
+    background-color: #1e91d3;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-slider-handle {
+    transform-origin: bottom left;
+    transition: all 0.7s ease-in-out 0s;
+    box-sizing: border-box;
+    top: -1px;
+    height: calc((var(--baseline) / 4));
+    width: calc((var(--baseline) / 4));
+    margin-left: calc(-1 * (var(--baseline) / 8));
+    border: 1px solid #cb598d;
+    border-radius: calc((var(--baseline) / 5));
+    padding: 0;
+    background: #cb598d;
+    box-shadow: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-slider-handle:focus, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-slider-handle:hover {
+    background-color: #db8baf;
+    border-color: #db8baf;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr {
+    float: left;
+    list-style: none;
+    border-right: 1px solid #282c2e;
+    padding: 0;
+}
+
+@media (max-width: 1120px) {
+    .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr {
+        margin-right: lh(0.5);
+        font-size: 0.875em;
+    }
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr .video_control:focus {
+    position: relative;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr .video_control.skip {
+    white-space: nowrap;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr .vidtime {
+    padding-left: lh(0.75);
+    display: inline-block;
+    color: #cfd8dc;
+    -webkit-font-smoothing: antialiased;
+}
+
+@media (max-width: 1120px) {
+    .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr .vidtime {
+        padding-left: lh(0.5);
+    }
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls {
+    float: right;
+    border-left: 1px dotted #4f595d;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .add-fullscreen,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .grouped-controls,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .auto-advance,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control {
+    border-left: 1px dotted #4f595d;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speed-button:focus,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume > .control:focus,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .add-fullscreen:focus,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .auto-advance:focus,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control:focus,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .toggle-transcript:focus {
+    position: relative;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container {
+    position: relative;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu {
+    transition: none;
+    position: absolute;
+    display: none;
+    bottom: calc((var(--baseline) * 2));
+    right: 0;
+    width: 120px;
+    margin: 0;
+    border: none;
+    padding: 0;
+    box-shadow: none;
+    background-color: #282c2e;
+    list-style: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li {
+    color: #e7ecee;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .speed-option,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .control-lang {
+    text-align: left;
+    display: block;
+    width: 100%;
+    border: 0;
+    border-radius: 0;
+    padding: lh(0.5);
+    background: #282c2e;
+    box-shadow: none;
+    color: #e7ecee;
+    overflow: hidden;
+    text-shadow: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .speed-option:hover, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .speed-option:focus,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .control-lang:hover,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .control-lang:focus {
+    background-color: #4f595d;
+    color: #fcfcfc;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li.is-active .speed-option,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li.is-active .control-lang {
+    border-left: calc(var(--baseline) / 10) solid #0ea6ec;
+    font-weight: var(--font-bold);
+    color: #0ea6ec;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container.is-opened .menu {
+    display: block;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .lang,
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .grouped-controls {
+    display: inline-block;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds.is-opened .control .icon {
+    transform: rotate(-90deg);
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds .speed-button .label {
+    padding: 0 calc((var(--baseline) / 3)) 0 0;
+    font-family: var(--font-family-sans-serif);
+    color: #e7ecee;
+}
+
+@media (max-width: 1120px) {
+    .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds .speed-button .label {
         position: absolute;
-        width: 90%;
-        box-sizing: border-box;
-        top: 70%;
-        text-align: center; }
-      /* line 273, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-      .xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible {
-        max-height: calc((var(--baseline) * 3));
-        border-radius: calc((var(--baseline) / 5));
-        padding: 8px calc((var(--baseline) / 2)) 8px calc((var(--baseline) * 1.5));
-        background: rgba(0, 0, 0, 0.75);
-        color: var(--yellow); }
-        /* line 280, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible::before {
-          position: absolute;
-          display: inline-block;
-          top: 50%;
-          left: var(--baseline);
-          margin-top: -0.6em;
-          font-family: 'FontAwesome';
-          content: "\f142";
-          color: var(--white);
-          opacity: 0.5; }
-        /* line 294, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible:hover, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible.is-dragging {
-          background: black;
-          cursor: move; }
-          /* line 299, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible:hover::before, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible.is-dragging::before {
-            opacity: 1; }
-      /* line 305, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-      .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player {
-        overflow: hidden;
-        min-height: 158px; }
-        /* line 309, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player > div {
-          height: 100%; }
-          /* line 312, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player > div.hidden {
-            display: none; }
-        /* line 317, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player .video-error,
-        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player .video-hls-error {
-          padding: calc((var(--baseline) / 5));
-          background: black;
-          color: white !important; }
-        /* line 324, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player object,
-        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player iframe,
-        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player video {
-          left: 0;
-          display: block;
-          border: none;
-          width: 100%; }
-        /* line 334, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player h4 {
-          text-align: center;
-          color: white; }
-          /* line 338, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player h4.hidden {
-            display: none; }
-      /* line 344, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-      .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls {
-        position: relative;
-        border: 0;
-        background: #282c2e;
-        color: #f0f3f5; }
-        /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */
-        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:after {
-          content: "";
-          display: table;
-          clear: both; }
-        /* line 354, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:hover ul,
-        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:hover div, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:focus ul,
-        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:focus div {
-          opacity: 1; }
-        /* line 360, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control {
-          display: inline-block;
-          vertical-align: middle;
-          margin: 0;
-          border: 0;
-          border-radius: 0;
-          padding: calc((var(--baseline) / 2)) calc((var(--baseline) / 1.5));
-          background: #282c2e;
-          box-shadow: none;
-          text-shadow: none;
-          color: #cfd8dc; }
-          /* line 375, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control:hover, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control:focus {
-            background: #171a1b; }
-          /* line 380, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control:active, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .is-active.control, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .active.control {
-            color: #0ea6ec; }
-        /* line 390, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control .icon {
-          width: 1em; }
-          /* line 393, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control .icon.icon-hd {
-            width: auto; }
-        /* line 401, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider {
-          transform-origin: bottom left;
-          transition: height 0.7s ease-in-out 0s;
-          box-sizing: border-box;
-          position: absolute;
-          bottom: 100%;
-          left: 0;
-          right: 0;
-          z-index: 1;
-          height: calc((var(--baseline) / 4));
-          margin-left: 0;
-          border: 1px solid #4f595d;
-          border-radius: 0;
-          background: #4f595d; }
-          /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */
-          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider:after {
-            content: "";
-            display: table;
-            clear: both; }
-          /* line 418, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-widget-header {
-            background: #8e3e63;
-            border: 1px solid #8e3e63;
-            box-shadow: none;
-            top: -1px;
-            left: -1px; }
-          /* line 426, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-corner-all.slider-range {
-            opacity: 0.3;
-            background-color: #1e91d3; }
-          /* line 431, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-slider-handle {
-            transform-origin: bottom left;
-            transition: all 0.7s ease-in-out 0s;
-            box-sizing: border-box;
-            top: -1px;
-            height: calc((var(--baseline) / 4));
-            width: calc((var(--baseline) / 4));
-            margin-left: calc(-1 * (var(--baseline) / 8));
-            border: 1px solid #cb598d;
-            border-radius: calc((var(--baseline) / 5));
-            padding: 0;
-            background: #cb598d;
-            box-shadow: none; }
-            /* line 448, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-            .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-slider-handle:focus, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-slider-handle:hover {
-              background-color: #db8baf;
-              border-color: #db8baf; }
-        /* line 456, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr {
-          float: left;
-          list-style: none;
-          border-right: 1px solid #282c2e;
-          padding: 0; }
-          @media (max-width: 1120px) {
-            /* line 456, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-            .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr {
-              margin-right: lh(0.5);
-              font-size: 0.875em; } }
-          /* line 472, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr .video_control:focus {
-            position: relative; }
-          /* line 476, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr .video_control.skip {
-            white-space: nowrap; }
-          /* line 481, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr .vidtime {
-            padding-left: lh(0.75);
-            display: inline-block;
-            color: #cfd8dc;
-            -webkit-font-smoothing: antialiased; }
-            @media (max-width: 1120px) {
-              /* line 481, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-              .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr .vidtime {
-                padding-left: lh(0.5); } }
-        /* line 497, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls {
-          float: right;
-          border-left: 1px dotted #4f595d; }
-          /* line 501, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume,
-          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .add-fullscreen,
-          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .grouped-controls,
-          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .auto-advance,
-          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control {
-            border-left: 1px dotted #4f595d; }
-          /* line 515, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speed-button:focus,
-          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume > .control:focus,
-          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .add-fullscreen:focus,
-          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .auto-advance:focus,
-          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control:focus,
-          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .toggle-transcript:focus {
-            position: relative; }
-          /* line 520, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container {
-            position: relative; }
-            /* line 523, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-            .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu {
-              transition: none;
-              position: absolute;
-              display: none;
-              bottom: calc((var(--baseline) * 2));
-              right: 0;
-              width: 120px;
-              margin: 0;
-              border: none;
-              padding: 0;
-              box-shadow: none;
-              background-color: #282c2e;
-              list-style: none; }
-              /* line 542, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-              .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li {
-                color: #e7ecee; }
-                /* line 547, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-                .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .speed-option,
-                .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .control-lang {
-                  text-align: left;
-                  display: block;
-                  width: 100%;
-                  border: 0;
-                  border-radius: 0;
-                  padding: lh(0.5);
-                  background: #282c2e;
-                  box-shadow: none;
-                  color: #e7ecee;
-                  overflow: hidden;
-                  text-shadow: none;
-                  text-overflow: ellipsis;
-                  white-space: nowrap; }
-                  /* line 564, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-                  .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .speed-option:hover, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .speed-option:focus,
-                  .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .control-lang:hover,
-                  .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .control-lang:focus {
-                    background-color: #4f595d;
-                    color: #fcfcfc; }
-                /* line 572, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-                .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li.is-active .speed-option,
-                .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li.is-active .control-lang {
-                  border-left: calc(var(--baseline)/10) solid #0ea6ec;
-                  font-weight: var(--font-bold);
-                  color: #0ea6ec; }
-            /* line 584, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-            .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container.is-opened .menu {
-              display: block; }
-          /* line 590, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds,
-          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .lang,
-          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .grouped-controls {
-            display: inline-block; }
-          /* line 599, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds.is-opened .control .icon {
-            transform: rotate(-90deg); }
-          /* line 612, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds .speed-button .label {
-            padding: 0 calc((var(--baseline)/3)) 0 0;
-            font-family: var(--font-family-sans-serif);
-            color: #e7ecee; }
-            @media (max-width: 1120px) {
-              /* line 612, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-              .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds .speed-button .label {
-                position: absolute;
-                clip: rect(1px, 1px, 1px, 1px); } }
-          /* line 624, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds .speed-button .value {
-            padding: 0 lh(0.5) 0 0;
-            color: #e7ecee;
-            font-weight: bold; }
-            @media (max-width: 1120px) {
-              /* line 624, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-              .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds .speed-button .value {
-                padding: 0 lh(0.5); } }
-          /* line 638, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .lang .language-menu {
-            width: var(--baseline);
-            padding: calc((var(--baseline) / 2)) 0; }
-          /* line 653, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .lang.is-opened .control .icon {
-            transform: rotate(90deg); }
-          /* line 666, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume {
-            display: inline-block;
-            position: relative; }
-            /* line 671, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-            .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume.is-opened .volume-slider-container {
-              display: block;
-              opacity: 1; }
-            /* line 677, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-            .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume:not(:first-child) > a {
-              border-left: none; }
-            /* line 681, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-            .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container {
-              transition: none;
-              display: none;
-              position: absolute;
-              bottom: calc((var(--baseline) * 2));
-              right: 0;
-              width: 41px;
-              height: 120px;
-              background-color: #282c2e; }
-              /* line 696, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-              .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider {
-                height: 100px;
-                width: calc((var(--baseline) / 4));
-                margin: 14px auto;
-                box-sizing: border-box;
-                border: 1px solid #4f595d;
-                background: #4f595d; }
-                /* line 704, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-                .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-handle {
-                  transition: height var(--tmg-s2) ease-in-out 0s, width var(--tmg-s2) ease-in-out 0s;
-                  left: -5px;
-                  box-sizing: border-box;
-                  height: 13px;
-                  width: 13px;
-                  border: 1px solid #cb598d;
-                  border-radius: calc((var(--baseline) / 5));
-                  padding: 0;
-                  background: #cb598d;
-                  box-shadow: none; }
-                  /* line 719, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-                  .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-handle:hover, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-handle:focus {
-                    background: #db8baf;
-                    border-color: #db8baf; }
-                /* line 726, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-                .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-range {
-                  background: #8e3e63;
-                  border: 1px solid #8e3e63;
-                  left: -1px;
-                  bottom: -1px; }
-          /* line 736, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control {
-            font-weight: 700;
-            letter-spacing: -1px; }
-            /* line 740, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-            .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control.active {
-              color: #0ea6ec; }
-            /* line 744, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-            .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control.is-hidden, .xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-controls .secondary-controls .quality-control.subtitles {
-              display: none !important; }
-          /* line 750, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .toggle-transcript.is-active {
-            color: #0ea6ec; }
-          /* line 756, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .lang > .hide-subtitles {
-            transition: none; }
-      /* line 765, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-      .xmodule_display.xmodule_VideoBlock .video .video-wrapper:hover .video-controls .slider {
-        height: calc((var(--baseline) / 1.5)); }
-        /* line 768, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-        .xmodule_display.xmodule_VideoBlock .video .video-wrapper:hover .video-controls .slider .ui-slider-handle {
-          height: calc((var(--baseline) / 1.5));
-          width: calc((var(--baseline) / 1.5)); }
-    /* line 778, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-    .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .closed-captions {
-      width: 65%; }
-    /* line 782, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-    .xmodule_display.xmodule_VideoBlock .video.video-fullscreen.closed .closed-captions {
-      width: 90%; }
-    /* line 787, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-    .xmodule_display.xmodule_VideoBlock .video .subtitles {
-      float: left;
-      overflow: auto;
-      max-height: 460px;
-      width: 31.81818%;
-      padding: 0;
-      font-size: 14px;
-      visibility: visible; }
-      /* line 797, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-      .xmodule_display.xmodule_VideoBlock .video .subtitles a {
-        color: #0074b5; }
-      /* line 801, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-      .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu {
-        height: 100%;
-        margin: 0;
-        padding: 0 3px;
-        list-style: none; }
-        /* line 807, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-        .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li {
-          margin-bottom: 8px;
-          border: 0;
-          padding: 0;
-          color: #0074b5;
-          line-height: lh(); }
-          /* line 816, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-          .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li span {
-            display: block; }
-          /* line 820, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-          .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li.current {
-            color: #333;
-            font-weight: 700; }
-          /* line 825, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-          .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li.focused {
-            outline: #000 dotted thin;
-            outline-offset: -1px; }
-          /* line 830, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-          .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li:hover, .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li:focus {
-            text-decoration: underline; }
-          /* line 835, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-          .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li:empty {
-            margin-bottom: 0; }
-          /* line 839, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-          .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li.spacing:last-of-type {
-            position: relative; }
-            /* line 842, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-            .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li.spacing:last-of-type .transcript-end {
-              position: absolute;
-              bottom: 0; }
-    /* line 852, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-    .xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper {
-      width: 100%;
-      background-color: inherit; }
-    /* line 857, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-    .xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-controls.html5 {
-      bottom: 0;
-      left: 0;
-      right: 0;
-      position: absolute;
-      z-index: 1; }
-    /* line 865, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-    .xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-player-pre,
-    .xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-player-post {
-      height: 0; }
-    /* line 871, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-    .xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-player h3 {
-      color: black; }
-    /* line 880, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-    .xmodule_display.xmodule_VideoBlock .video.closed .subtitles.html5 {
-      background-color: rgba(243, 243, 243, 0.8);
-      height: 100%;
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      top: 0;
-      width: 275px;
-      padding: 0 var(--baseline);
-      display: none; }
-    /* line 895, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-    .xmodule_display.xmodule_VideoBlock .video.video-fullscreen {
-      background: rgba(0, 0, 0, 0.95);
-      border: 0;
-      bottom: 0;
-      height: 100%;
-      left: 0;
-      margin: 0;
-      padding: 0;
-      position: fixed;
-      top: 0;
-      width: 100%;
-      vertical-align: middle;
-      border-radius: 0; }
-      /* line 913, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-      .xmodule_display.xmodule_VideoBlock .video.video-fullscreen.closed .tc-wrapper .video-wrapper {
-        width: 100%; }
-      /* line 919, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-      .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .video-wrapper .video-player-pre,
-      .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .video-wrapper .video-player-post {
-        height: 0; }
-      /* line 924, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-      .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .video-wrapper {
-        position: static; }
-      /* line 929, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-      .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .video-wrapper .video-player h3 {
-        color: white; }
-      /* line 934, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-      .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper {
-        width: 100%;
-        height: 100%;
-        position: static; }
-        /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */
-        .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper:after {
-          content: "";
-          display: table;
-          clear: both; }
-        /* line 941, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-        .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-wrapper {
-          height: 100%;
-          width: 75%;
-          margin-right: 0;
-          vertical-align: middle; }
-          /* line 949, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-          .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-wrapper object,
-          .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-wrapper iframe,
-          .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-wrapper video {
-            position: absolute;
-            width: auto;
-            height: auto; }
-        /* line 958, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-        .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-controls {
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          width: 100%; }
-      /* line 968, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-      .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .subtitles {
-        height: 100%;
-        width: 25%;
-        padding: lh();
-        box-sizing: border-box;
-        transition: none;
-        background: var(--black);
-        visibility: visible; }
-        /* line 979, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-        .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .subtitles li {
-          color: #aaa; }
-          /* line 982, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-          .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .subtitles li.current {
-            color: var(--white); }
-    /* line 992, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-    .xmodule_display.xmodule_VideoBlock .video.is-touch .tc-wrapper .video-wrapper object,
-    .xmodule_display.xmodule_VideoBlock .video.is-touch .tc-wrapper .video-wrapper iframe,
-    .xmodule_display.xmodule_VideoBlock .video.is-touch .tc-wrapper .video-wrapper video {
-      width: 100%;
-      height: 100%; }
-    /* line 1002, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-    .xmodule_display.xmodule_VideoBlock .video .video-pre-roll {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-position: 50% 50%;
-      background-repeat: no-repeat;
-      background-size: 100%;
-      background-color: var(--black); }
-      /* line 1015, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-      .xmodule_display.xmodule_VideoBlock .video .video-pre-roll.is-html5 {
-        background-size: 15%; }
-      /* line 1019, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-      .xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll {
-        padding: var(--baseline);
-        border: none;
-        border-radius: var(--baseline);
-        background: var(--black-t2);
-        box-shadow: none; }
-        /* line 1026, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-        .xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll::after {
-          display: none; }
-        /* line 1032, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-        .xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll img {
-          height: calc((var(--baseline) * 4));
-          width: calc((var(--baseline) * 4)); }
-        /* line 1037, /openedx/edx-platform/xmodule/assets/video/_display.scss */
-        .xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll:hover, .xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll:focus {
-          background: var(--blue); }
-  /* line 88, lms/static/sass/base/_mixins.scss */
-  .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-slider-handle, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-handle, .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li, .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li {
-    cursor: pointer; }
-  /* line 100, lms/static/sass/base/_mixins.scss */
-  .xmodule_display.xmodule_VideoBlock .video.closed .subtitles.html5 {
-    z-index: 0; }
-  /* line 101, lms/static/sass/base/_mixins.scss */
-  .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container {
-    z-index: 10; }
-  /* line 103, lms/static/sass/base/_mixins.scss */
-  .xmodule_display.xmodule_VideoBlock .video .video-pre-roll, .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list {
-    z-index: 1000; }
-  /* line 104, lms/static/sass/base/_mixins.scss */
-  .xmodule_display.xmodule_VideoBlock .video.video-fullscreen, .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-controls, .xmodule_display.xmodule_VideoBlock .overlay {
-    z-index: 10000; }
-  /* line 105, lms/static/sass/base/_mixins.scss */
-  .xmodule_display.xmodule_VideoBlock .contextmenu,
-  .xmodule_display.xmodule_VideoBlock .submenu {
-    z-index: 100000; }
-  /* line 11, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
-  .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container > a::after {
+        clip: rect(1px, 1px, 1px, 1px);
+    }
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds .speed-button .value {
+    padding: 0 lh(0.5) 0 0;
+    color: #e7ecee;
+    font-weight: bold;
+}
+
+@media (max-width: 1120px) {
+    .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds .speed-button .value {
+        padding: 0 lh(0.5);
+    }
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .lang .language-menu {
+    width: var(--baseline);
+    padding: calc((var(--baseline) / 2)) 0;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .lang.is-opened .control .icon {
+    transform: rotate(90deg);
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume {
+    display: inline-block;
+    position: relative;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume.is-opened .volume-slider-container {
+    display: block;
+    opacity: 1;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume:not(:first-child) > a {
+    border-left: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container {
+    transition: none;
+    display: none;
+    position: absolute;
+    bottom: calc((var(--baseline) * 2));
+    right: 0;
+    width: 41px;
+    height: 120px;
+    background-color: #282c2e;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider {
+    height: 100px;
+    width: calc((var(--baseline) / 4));
+    margin: 14px auto;
+    box-sizing: border-box;
+    border: 1px solid #4f595d;
+    background: #4f595d;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-handle {
+    transition: height var(--tmg-s2) ease-in-out 0s, width var(--tmg-s2) ease-in-out 0s;
+    left: -5px;
+    box-sizing: border-box;
+    height: 13px;
+    width: 13px;
+    border: 1px solid #cb598d;
+    border-radius: calc((var(--baseline) / 5));
+    padding: 0;
+    background: #cb598d;
+    box-shadow: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-handle:hover, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-handle:focus {
+    background: #db8baf;
+    border-color: #db8baf;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-range {
+    background: #8e3e63;
+    border: 1px solid #8e3e63;
+    left: -1px;
+    bottom: -1px;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control {
+    font-weight: 700;
+    letter-spacing: -1px;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control.active {
+    color: #0ea6ec;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control.is-hidden, .xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-controls .secondary-controls .quality-control.subtitles {
+    display: none !important;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .toggle-transcript.is-active {
+    color: #0ea6ec;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .lang > .hide-subtitles {
+    transition: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper:hover .video-controls .slider {
+    height: calc((var(--baseline) / 1.5));
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper:hover .video-controls .slider .ui-slider-handle {
+    height: calc((var(--baseline) / 1.5));
+    width: calc((var(--baseline) / 1.5));
+}
+
+.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .closed-captions {
+    width: 65%;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.video-fullscreen.closed .closed-captions {
+    width: 90%;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .subtitles {
+    float: left;
+    overflow: auto;
+    max-height: 460px;
+    width: 31.81818%;
+    padding: 0;
+    font-size: 14px;
+    visibility: visible;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .subtitles a {
+    color: #0074b5;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu {
+    height: 100%;
+    margin: 0;
+    padding: 0 3px;
+    list-style: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li {
+    margin-bottom: 8px;
+    border: 0;
+    padding: 0;
+    color: #0074b5;
+    line-height: lh();
+}
+
+.xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li span {
+    display: block;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li.current {
+    color: #333;
+    font-weight: 700;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li.focused {
+    outline: #000 dotted thin;
+    outline-offset: -1px;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li:hover, .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li:focus {
+    text-decoration: underline;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li:empty {
+    margin-bottom: 0;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li.spacing:last-of-type {
+    position: relative;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li.spacing:last-of-type .transcript-end {
+    position: absolute;
+    bottom: 0;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper {
+    width: 100%;
+    background-color: inherit;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-controls.html5 {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    position: absolute;
+    z-index: 1;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-player-pre,
+.xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-player-post {
+    height: 0;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-player h3 {
+    color: black;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.closed .subtitles.html5 {
+    background-color: rgba(243, 243, 243, 0.8);
+    height: 100%;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    width: 275px;
+    padding: 0 var(--baseline);
+    display: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.video-fullscreen {
+    background: rgba(0, 0, 0, 0.95);
+    border: 0;
+    bottom: 0;
+    height: 100%;
+    left: 0;
+    margin: 0;
+    padding: 0;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    vertical-align: middle;
+    border-radius: 0;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.video-fullscreen.closed .tc-wrapper .video-wrapper {
+    width: 100%;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .video-wrapper .video-player-pre,
+.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .video-wrapper .video-player-post {
+    height: 0;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .video-wrapper {
+    position: static;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .video-wrapper .video-player h3 {
+    color: white;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper {
+    width: 100%;
+    height: 100%;
+    position: static;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-wrapper {
+    height: 100%;
+    width: 75%;
+    margin-right: 0;
+    vertical-align: middle;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-wrapper object,
+.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-wrapper iframe,
+.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-wrapper video {
+    position: absolute;
+    width: auto;
+    height: auto;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-controls {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .subtitles {
+    height: 100%;
+    width: 25%;
+    padding: lh();
+    box-sizing: border-box;
+    transition: none;
+    background: var(--black);
+    visibility: visible;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .subtitles li {
+    color: #aaa;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.video-fullscreen .subtitles li.current {
+    color: var(--white);
+}
+
+.xmodule_display.xmodule_VideoBlock .video.is-touch .tc-wrapper .video-wrapper object,
+.xmodule_display.xmodule_VideoBlock .video.is-touch .tc-wrapper .video-wrapper iframe,
+.xmodule_display.xmodule_VideoBlock .video.is-touch .tc-wrapper .video-wrapper video {
+    width: 100%;
+    height: 100%;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-pre-roll {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-size: 100%;
+    background-color: var(--black);
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-pre-roll.is-html5 {
+    background-size: 15%;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll {
+    padding: var(--baseline);
+    border: none;
+    border-radius: var(--baseline);
+    background: var(--black-t2);
+    box-shadow: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll::after {
+    display: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll img {
+    height: calc((var(--baseline) * 4));
+    width: calc((var(--baseline) * 4));
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll:hover, .xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll:focus {
+    background: var(--blue);
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-slider-handle, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-handle, .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li, .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li {
+    cursor: pointer;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.closed .subtitles.html5 {
+    z-index: 0;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container {
+    z-index: 10;
+}
+
+.xmodule_display.xmodule_VideoBlock .video .video-pre-roll, .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list {
+    z-index: 1000;
+}
+
+.xmodule_display.xmodule_VideoBlock .video.video-fullscreen, .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-controls, .xmodule_display.xmodule_VideoBlock .overlay {
+    z-index: 10000;
+}
+
+.xmodule_display.xmodule_VideoBlock .contextmenu,
+.xmodule_display.xmodule_VideoBlock .submenu {
+    z-index: 100000;
+}
+
+.xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container > a::after {
     font-family: FontAwesome;
     -webkit-font-smoothing: antialiased;
     display: inline-block;
-    speak: none; }
-  /* line 18, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
-  .xmodule_display.xmodule_VideoBlock .a11y-menu-container {
-    position: relative; }
-    /* line 22, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
-    .xmodule_display.xmodule_VideoBlock .a11y-menu-container.open .a11y-menu-list {
-      display: block; }
-    /* line 27, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
-    .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list {
-      top: 100%;
-      margin: 0;
-      padding: 0;
-      display: none;
-      position: absolute;
-      list-style: none;
-      background-color: var(--white);
-      border: 1px solid #eee; }
-      /* line 39, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
-      .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li {
-        margin: 0;
-        padding: 0;
-        border-bottom: 1px solid #eee;
-        color: var(--white); }
-        /* line 47, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
-        .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li a {
-          display: block;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          color: var(--gray-l2);
-          font-size: 14px;
-          line-height: 23px; }
-          /* line 56, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
-          .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li a:hover, .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li a:focus {
-            color: var(--gray-d1); }
-        /* line 63, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
-        .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li.active a {
-          color: #009fe6; }
-        /* line 68, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
-        .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li:last-child {
-          box-shadow: none;
-          border-bottom: 0;
-          margin-top: 0; }
-  /* line 81, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
-  .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container {
+    speak: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .a11y-menu-container {
+    position: relative;
+}
+
+.xmodule_display.xmodule_VideoBlock .a11y-menu-container.open .a11y-menu-list {
+    display: block;
+}
+
+.xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list {
+    top: 100%;
+    margin: 0;
+    padding: 0;
+    display: none;
+    position: absolute;
+    list-style: none;
+    background-color: var(--white);
+    border: 1px solid #eee;
+}
+
+.xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li {
+    margin: 0;
+    padding: 0;
+    border-bottom: 1px solid #eee;
+    color: var(--white);
+}
+
+.xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li a {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--gray-l2);
+    font-size: 14px;
+    line-height: 23px;
+}
+
+.xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li a:hover, .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li a:focus {
+    color: var(--gray-d1);
+}
+
+.xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li.active a {
+    color: #009fe6;
+}
+
+.xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li:last-child {
+    box-shadow: none;
+    border-bottom: 0;
+    margin-top: 0;
+}
+
+.xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container {
     display: inline-block;
     vertical-align: top;
-    border-left: 1px solid #eee; }
-    /* line 87, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
-    .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container.open > a {
-      background-color: var(--action-primary-active-bg);
-      color: var(--very-light-text); }
-      /* line 91, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
-      .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container.open > a::after {
-        color: var(--very-light-text); }
-    /* line 97, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
-    .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container > a {
-      transition: all var(--tmg-f2) ease-in-out 0s;
-      font-size: 12px;
-      display: block;
-      border-radius: 0 3px 3px 0;
-      background-color: var(--very-light-text);
-      padding: calc((var(--baseline)*0.75)) calc((var(--baseline)*1.25)) calc((var(--baseline)*0.75)) calc((var(--baseline)*0.75));
-      color: var(--gray-l2);
-      min-width: 1.5em;
-      line-height: 14px;
-      text-align: center;
-      overflow: hidden;
-      text-overflow: ellipsis; }
-      /* line 112, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
-      .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container > a::after {
-        content: "\f0d7";
-        position: absolute;
-        right: calc((var(--baseline)*0.5));
-        top: 33%;
-        color: var(--lighter-base-font-color); }
-    /* line 123, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
-    .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container .a11y-menu-list {
-      right: 0; }
-      /* line 126, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
-      .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container .a11y-menu-list li {
-        font-size: 0.875em; }
-        /* line 129, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
-        .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container .a11y-menu-list li a {
-          border: 0;
-          display: block;
-          padding: 0.70788em;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap; }
-  /* line 143, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
-  .xmodule_display.xmodule_VideoBlock .contextmenu,
-  .xmodule_display.xmodule_VideoBlock .submenu {
+    border-left: 1px solid #eee;
+}
+
+.xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container.open > a {
+    background-color: var(--action-primary-active-bg);
+    color: var(--very-light-text);
+}
+
+.xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container.open > a::after {
+    color: var(--very-light-text);
+}
+
+.xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container > a {
+    transition: all var(--tmg-f2) ease-in-out 0s;
+    font-size: 12px;
+    display: block;
+    border-radius: 0 3px 3px 0;
+    background-color: var(--very-light-text);
+    padding: calc((var(--baseline) * 0.75)) calc((var(--baseline) * 1.25)) calc((var(--baseline) * 0.75)) calc((var(--baseline) * 0.75));
+    color: var(--gray-l2);
+    min-width: 1.5em;
+    line-height: 14px;
+    text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container > a::after {
+    content: "\f0d7";
+    position: absolute;
+    right: calc((var(--baseline) * 0.5));
+    top: 33%;
+    color: var(--lighter-base-font-color);
+}
+
+.xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container .a11y-menu-list {
+    right: 0;
+}
+
+.xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container .a11y-menu-list li {
+    font-size: 0.875em;
+}
+
+.xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container .a11y-menu-list li a {
+    border: 0;
+    display: block;
+    padding: 0.70788em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.xmodule_display.xmodule_VideoBlock .contextmenu,
+.xmodule_display.xmodule_VideoBlock .submenu {
     border: 1px solid #333;
     background: var(--white);
     color: #333;
@@ -875,88 +1044,104 @@
     display: none;
     outline: none;
     cursor: default;
-    white-space: nowrap; }
-    /* line 160, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
-    .xmodule_display.xmodule_VideoBlock .contextmenu.is-opened,
-    .xmodule_display.xmodule_VideoBlock .submenu.is-opened {
-      display: block; }
-    /* line 164, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
-    .xmodule_display.xmodule_VideoBlock .contextmenu .menu-item,
-    .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item,
-    .xmodule_display.xmodule_VideoBlock .submenu .menu-item,
-    .xmodule_display.xmodule_VideoBlock .submenu .submenu-item {
-      border-top: 1px solid var(--gray-l3);
-      padding: calc((var(--baseline)/4)) calc((var(--baseline)/2));
-      outline: none; }
-      /* line 170, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
-      .xmodule_display.xmodule_VideoBlock .contextmenu .menu-item > span,
-      .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item > span,
-      .xmodule_display.xmodule_VideoBlock .submenu .menu-item > span,
-      .xmodule_display.xmodule_VideoBlock .submenu .submenu-item > span {
-        color: #333; }
-      /* line 174, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
-      .xmodule_display.xmodule_VideoBlock .contextmenu .menu-item:first-child,
-      .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item:first-child,
-      .xmodule_display.xmodule_VideoBlock .submenu .menu-item:first-child,
-      .xmodule_display.xmodule_VideoBlock .submenu .submenu-item:first-child {
-        border-top: none; }
-      /* line 178, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
-      .xmodule_display.xmodule_VideoBlock .contextmenu .menu-item:focus,
-      .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item:focus,
-      .xmodule_display.xmodule_VideoBlock .submenu .menu-item:focus,
-      .xmodule_display.xmodule_VideoBlock .submenu .submenu-item:focus {
-        background: #333;
-        color: var(--white); }
-        /* line 182, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
-        .xmodule_display.xmodule_VideoBlock .contextmenu .menu-item:focus > span,
-        .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item:focus > span,
-        .xmodule_display.xmodule_VideoBlock .submenu .menu-item:focus > span,
-        .xmodule_display.xmodule_VideoBlock .submenu .submenu-item:focus > span {
-          color: var(--white); }
-    /* line 188, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
-    .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item,
-    .xmodule_display.xmodule_VideoBlock .submenu .submenu-item {
-      position: relative;
-      padding: calc((var(--baseline)/4)) var(--baseline) calc((var(--baseline)/4)) calc((var(--baseline)/2)); }
-      /* line 192, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
-      .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item::after,
-      .xmodule_display.xmodule_VideoBlock .submenu .submenu-item::after {
-        content: '\25B6';
-        position: absolute;
-        right: 5px;
-        line-height: 25px;
-        font-size: 10px; }
-      /* line 200, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
-      .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item .submenu,
-      .xmodule_display.xmodule_VideoBlock .submenu .submenu-item .submenu {
-        display: none; }
-      /* line 204, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
-      .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item.is-opened,
-      .xmodule_display.xmodule_VideoBlock .submenu .submenu-item.is-opened {
-        background: #333;
-        color: var(--white); }
-        /* line 208, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
-        .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item.is-opened > span,
-        .xmodule_display.xmodule_VideoBlock .submenu .submenu-item.is-opened > span {
-          color: var(--white); }
-        /* line 212, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
-        .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item.is-opened > .submenu,
-        .xmodule_display.xmodule_VideoBlock .submenu .submenu-item.is-opened > .submenu {
-          display: block; }
-      /* line 217, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
-      .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item .is-selected,
-      .xmodule_display.xmodule_VideoBlock .submenu .submenu-item .is-selected {
-        font-weight: bold; }
-    /* line 222, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
-    .xmodule_display.xmodule_VideoBlock .contextmenu .is-disabled,
-    .xmodule_display.xmodule_VideoBlock .submenu .is-disabled {
-      pointer-events: none;
-      color: var(--gray-l3); }
-  /* line 228, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
-  .xmodule_display.xmodule_VideoBlock .overlay {
+    white-space: nowrap;
+}
+
+.xmodule_display.xmodule_VideoBlock .contextmenu.is-opened,
+.xmodule_display.xmodule_VideoBlock .submenu.is-opened {
+    display: block;
+}
+
+.xmodule_display.xmodule_VideoBlock .contextmenu .menu-item,
+.xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item,
+.xmodule_display.xmodule_VideoBlock .submenu .menu-item,
+.xmodule_display.xmodule_VideoBlock .submenu .submenu-item {
+    border-top: 1px solid var(--gray-l3);
+    padding: calc((var(--baseline) / 4)) calc((var(--baseline) / 2));
+    outline: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .contextmenu .menu-item > span,
+.xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item > span,
+.xmodule_display.xmodule_VideoBlock .submenu .menu-item > span,
+.xmodule_display.xmodule_VideoBlock .submenu .submenu-item > span {
+    color: #333;
+}
+
+.xmodule_display.xmodule_VideoBlock .contextmenu .menu-item:first-child,
+.xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item:first-child,
+.xmodule_display.xmodule_VideoBlock .submenu .menu-item:first-child,
+.xmodule_display.xmodule_VideoBlock .submenu .submenu-item:first-child {
+    border-top: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .contextmenu .menu-item:focus,
+.xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item:focus,
+.xmodule_display.xmodule_VideoBlock .submenu .menu-item:focus,
+.xmodule_display.xmodule_VideoBlock .submenu .submenu-item:focus {
+    background: #333;
+    color: var(--white);
+}
+
+.xmodule_display.xmodule_VideoBlock .contextmenu .menu-item:focus > span,
+.xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item:focus > span,
+.xmodule_display.xmodule_VideoBlock .submenu .menu-item:focus > span,
+.xmodule_display.xmodule_VideoBlock .submenu .submenu-item:focus > span {
+    color: var(--white);
+}
+
+.xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item,
+.xmodule_display.xmodule_VideoBlock .submenu .submenu-item {
+    position: relative;
+    padding: calc((var(--baseline) / 4)) var(--baseline) calc((var(--baseline) / 4)) calc((var(--baseline) / 2));
+}
+
+.xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item::after,
+.xmodule_display.xmodule_VideoBlock .submenu .submenu-item::after {
+    content: '\25B6';
+    position: absolute;
+    right: 5px;
+    line-height: 25px;
+    font-size: 10px;
+}
+
+.xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item .submenu,
+.xmodule_display.xmodule_VideoBlock .submenu .submenu-item .submenu {
+    display: none;
+}
+
+.xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item.is-opened,
+.xmodule_display.xmodule_VideoBlock .submenu .submenu-item.is-opened {
+    background: #333;
+    color: var(--white);
+}
+
+.xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item.is-opened > span,
+.xmodule_display.xmodule_VideoBlock .submenu .submenu-item.is-opened > span {
+    color: var(--white);
+}
+
+.xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item.is-opened > .submenu,
+.xmodule_display.xmodule_VideoBlock .submenu .submenu-item.is-opened > .submenu {
+    display: block;
+}
+
+.xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item .is-selected,
+.xmodule_display.xmodule_VideoBlock .submenu .submenu-item .is-selected {
+    font-weight: bold;
+}
+
+.xmodule_display.xmodule_VideoBlock .contextmenu .is-disabled,
+.xmodule_display.xmodule_VideoBlock .submenu .is-disabled {
+    pointer-events: none;
+    color: var(--gray-l3);
+}
+
+.xmodule_display.xmodule_VideoBlock .overlay {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: transparent; }
+    background-color: transparent;
+}
diff --git a/xmodule/assets/VideoBlockEditor.css b/xmodule/assets/VideoBlockEditor.css
index 3577fdb22d32..4a570a5fec89 100644
--- a/xmodule/assets/VideoBlockEditor.css
+++ b/xmodule/assets/VideoBlockEditor.css
@@ -1,139 +1,167 @@
 @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700");
-/* line 1, /openedx/edx-platform/xmodule/assets/VideoBlockEditor.scss */
-.xmodule_edit.xmodule_VideoBlock { }
-  /* line 123, common/static/sass/_mixins.scss */
-  .xmodule_edit.xmodule_VideoBlock .ui-col-wide {
+
+.xmodule_edit.xmodule_VideoBlock {
+}
+
+.xmodule_edit.xmodule_VideoBlock .ui-col-wide {
     width: 74.46809%;
     margin-right: 2.12766%;
-    float: left; }
-  /* line 130, common/static/sass/_mixins.scss */
-  .xmodule_edit.xmodule_VideoBlock .ui-col-narrow {
+    float: left;
+}
+
+.xmodule_edit.xmodule_VideoBlock .ui-col-narrow {
     width: 23.40426%;
-    float: left; }
-  /* line 342, common/static/sass/_mixins.scss */
-  .xmodule_edit.xmodule_VideoBlock .ui-loading {
+    float: left;
+}
+
+.xmodule_edit.xmodule_VideoBlock .ui-loading {
     box-shadow: inset 0 1px 2px 1px rgba(0, 0, 0, 0.2);
-    padding: 15px 20px; }
-  /* line 368, common/static/sass/_mixins.scss */
-  .xmodule_edit.xmodule_VideoBlock .ui-loading {
+    padding: 15px 20px;
+}
+
+.xmodule_edit.xmodule_VideoBlock .ui-loading {
     animation: fadeIn 0.25s linear 1;
     opacity: 0.6;
     background-color: #fff;
     padding: 30px 20px;
-    text-align: center; }
-    /* line 379, common/static/sass/_mixins.scss */
-    .xmodule_edit.xmodule_VideoBlock .ui-loading .spin {
-      display: inline-block; }
-    /* line 385, common/static/sass/_mixins.scss */
-    .xmodule_edit.xmodule_VideoBlock .ui-loading .copy {
-      padding-left: 5px; }
-  /* line 390, common/static/sass/_mixins.scss */
-  .xmodule_edit.xmodule_VideoBlock .is-hidden {
-    display: none; }
-  /* line 10, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
-  .xmodule_edit.xmodule_VideoBlock .tabs-wrapper {
+    text-align: center;
+}
+
+.xmodule_edit.xmodule_VideoBlock .ui-loading .spin {
+    display: inline-block;
+}
+
+.xmodule_edit.xmodule_VideoBlock .ui-loading .copy {
+    padding-left: 5px;
+}
+
+.xmodule_edit.xmodule_VideoBlock .is-hidden {
+    display: none;
+}
+
+.xmodule_edit.xmodule_VideoBlock .tabs-wrapper {
     padding-top: 0;
-    position: relative; }
-    /* line 14, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
-    .xmodule_edit.xmodule_VideoBlock .tabs-wrapper .wrapper-comp-settings {
-      display: block; }
-  /* line 20, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
-  .xmodule_edit.xmodule_VideoBlock .editor-single-tab-name {
-    display: none; }
-  /* line 25, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
-  .xmodule_edit.xmodule_VideoBlock .editor-with-tabs {
-    position: relative; }
-    /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */
-    .xmodule_edit.xmodule_VideoBlock .editor-with-tabs:after {
-      content: "";
-      display: table;
-      clear: both; }
-    /* line 31, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
-    .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header {
-      box-sizing: border-box;
-      padding: 18px var(--baseline);
-      top: 0 !important;
-      right: 0;
-      background-color: var(--blue);
-      border-bottom: 1px solid var(--blue-d2);
-      color: var(--white); }
-      /* line 42, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
-      .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .component-name {
-        position: relative;
-        top: 0;
-        left: 0;
-        width: 50%;
-        color: var(--white);
-        font-weight: 600; }
-        /* line 52, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
-        .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .component-name em {
-          display: inline-block;
-          margin-right: calc((var(--baseline)/4));
-          font-weight: 400;
-          color: var(--white); }
-      /* line 61, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
-      .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs {
-        list-style: none;
-        right: 0;
-        top: calc((var(--baseline)/4));
-        position: absolute;
-        padding: 12px calc((var(--baseline)*0.75)); }
-        /* line 68, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
-        .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap {
-          display: inline-block;
-          margin-left: 8px; }
-          /* line 72, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
-          .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap a.tab {
-            font-size: 14px;
-            font-size: 1.4rem;
-            background-color: rgba(255, 255, 255, 0.3);
-            background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
-            background-image: linear-gradient(to bottom,rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
-            border: 1px solid var(--blue-d1);
-            border-radius: 3px;
-            padding: calc((var(--baseline)/4)) var(--baseline);
-            background-color: var(--blue);
-            font-weight: bold;
-            color: var(--white); }
-            /* line 83, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
-            .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap a.tab.current {
-              background-color: var(--blue);
-              background-image: -webkit-linear-gradient(var(--blue), var(--blue));
-              background-image: linear-gradient(to ,var(--blue));
-              color: var(--blue-d1);
-              box-shadow: inset 0 1px 2px 1px var(--shadow-l1);
-              background-color: var(--blue-d4);
-              cursor: default; }
-            /* line 92, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
-            .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap a.tab:hover, .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap a.tab:focus {
-              box-shadow: inset 0 1px 2px 1px var(--shadow);
-              background-image: linear-gradient(#009fe6, #009fe6) !important; }
-    /* line 102, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
-    .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .is-inactive {
-      display: none; }
-    /* line 106, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
-    .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .comp-subtitles-entry {
-      text-align: center; }
-      /* line 109, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
-      .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .comp-subtitles-entry .file-upload {
-        display: none; }
-      /* line 114, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
-      .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .comp-subtitles-entry .comp-subtitles-import-list > li {
-        display: block;
-        margin: calc(var(--baseline)/2) 0; }
-      /* line 119, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
-      .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .comp-subtitles-entry .comp-subtitles-import-list .blue-button {
-        font-size: 1em;
-        display: block;
-        width: 70%;
-        margin: 0 auto;
-        text-align: center; }
-  /* line 130, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
-  .xmodule_edit.xmodule_VideoBlock .component-tab {
+    position: relative;
+}
+
+.xmodule_edit.xmodule_VideoBlock .tabs-wrapper .wrapper-comp-settings {
+    display: block;
+}
+
+.xmodule_edit.xmodule_VideoBlock .editor-single-tab-name {
+    display: none;
+}
+
+.xmodule_edit.xmodule_VideoBlock .editor-with-tabs {
+    position: relative;
+}
+
+.xmodule_edit.xmodule_VideoBlock .editor-with-tabs:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header {
+    box-sizing: border-box;
+    padding: 18px var(--baseline);
+    top: 0 !important;
+    right: 0;
+    background-color: var(--blue);
+    border-bottom: 1px solid var(--blue-d2);
+    color: var(--white);
+}
+
+.xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .component-name {
+    position: relative;
+    top: 0;
+    left: 0;
+    width: 50%;
+    color: var(--white);
+    font-weight: 600;
+}
+
+.xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .component-name em {
+    display: inline-block;
+    margin-right: calc((var(--baseline) / 4));
+    font-weight: 400;
+    color: var(--white);
+}
+
+.xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs {
+    list-style: none;
+    right: 0;
+    top: calc((var(--baseline) / 4));
+    position: absolute;
+    padding: 12px calc((var(--baseline) * 0.75));
+}
+
+.xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap {
+    display: inline-block;
+    margin-left: 8px;
+}
+
+.xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap a.tab {
+    font-size: 14px;
+    font-size: 1.4rem;
+    background-color: rgba(255, 255, 255, 0.3);
+    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
+    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
+    border: 1px solid var(--blue-d1);
+    border-radius: 3px;
+    padding: calc((var(--baseline) / 4)) var(--baseline);
+    background-color: var(--blue);
+    font-weight: bold;
+    color: var(--white);
+}
+
+.xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap a.tab.current {
+    background-color: var(--blue);
+    background-image: -webkit-linear-gradient(var(--blue), var(--blue));
+    background-image: linear-gradient(to, var(--blue));
+    color: var(--blue-d1);
+    box-shadow: inset 0 1px 2px 1px var(--shadow-l1);
+    background-color: var(--blue-d4);
+    cursor: default;
+}
+
+.xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap a.tab:hover, .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap a.tab:focus {
+    box-shadow: inset 0 1px 2px 1px var(--shadow);
+    background-image: linear-gradient(#009fe6, #009fe6) !important;
+}
+
+.xmodule_edit.xmodule_VideoBlock .editor-with-tabs .is-inactive {
+    display: none;
+}
+
+.xmodule_edit.xmodule_VideoBlock .editor-with-tabs .comp-subtitles-entry {
+    text-align: center;
+}
+
+.xmodule_edit.xmodule_VideoBlock .editor-with-tabs .comp-subtitles-entry .file-upload {
+    display: none;
+}
+
+.xmodule_edit.xmodule_VideoBlock .editor-with-tabs .comp-subtitles-entry .comp-subtitles-import-list > li {
+    display: block;
+    margin: calc(var(--baseline) / 2) 0;
+}
+
+.xmodule_edit.xmodule_VideoBlock .editor-with-tabs .comp-subtitles-entry .comp-subtitles-import-list .blue-button {
+    font-size: 1em;
+    display: block;
+    width: 70%;
+    margin: 0 auto;
+    text-align: center;
+}
+
+.xmodule_edit.xmodule_VideoBlock .component-tab {
     background: var(--white);
     position: relative;
-    border-top: 1px solid #8891a1; }
-    /* line 135, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
-    .xmodule_edit.xmodule_VideoBlock .component-tab#advanced {
-      padding: 0;
-      border: none; }
+    border-top: 1px solid #8891a1;
+}
+
+.xmodule_edit.xmodule_VideoBlock .component-tab#advanced {
+    padding: 0;
+    border: none;
+}