Merge pull request #9152 from edx/clrux/ux-2233-video-bumper

Updating the video bumper play button

common/lib/xmodule/xmodule/css/video/display.scss

@@ -839,12 +839,28 @@ div.video {
       background-size: 15%;
     }
 
-    .btn-play {
-      text-indent: -999px;
-      overflow: hidden;
+    .btn-play.btn-pre-roll {
+      padding: $baseline;
       border: none;
+      border-radius: $baseline;
+      background: $black-t2;
       box-shadow: none;
-      line-height: 0;
+
+      &:after {
+        // the button class, ties to functionality, also uses an icon font
+        // we're overriding it here so we can use our image instead
+        display: none;
+      }
+
+      img {
+        height: ($baseline * 4);
+        width: ($baseline * 4);
+      }
+
+      &:hover,
+      &:focus {
+        background: $blue;
+      }
     }
   }
 }

common/lib/xmodule/xmodule/js/src/video/09_poster.js

@@ -25,7 +25,10 @@ define('video/09_poster.js', [], function () {
         template: _.template([
             '<div class="video-pre-roll is-<%= type %> poster" ',
                 'style="background-image: url(<%= url %>)">',
-                '<button class="btn-play">', gettext('Play video'), '</button>',
+                '<button class="btn-play btn-pre-roll">',
+                    '<img src="/static/images/play.png" alt="">',
+                    '<span class="sr">', gettext('Play video'), '</span>',
+                '</button>',
             '</div>'
         ].join('')),