Skip to main content
MediaBeacon University

Styling HTML5 Video Player Elements

Version: 8.5+

Abstract

How to hide the various elements of the standard HTML5 video player using Custom Theme CSS. This CSS is not universal across all browsers.

Resolution

Hide Download Button

video::-internal-media-controls-download-button { display: none; } /* deprecated */
video::-webkit-media-controls-enclosure { overflow: hidden; }
video::-webkit-media-controls-panel { width: calc(100% + 32px); }

Hide Volume Controls

Note: For Infinite Scroll widget only.

.InfiniteScrollViewWidget video::-webkit-media-controls-volume-slider {display: none;}
.InfiniteScrollViewWidget video::-webkit-media-controls-mute-button {display: none;}

Hide Fullscreen Button

video::-webkit-media-controls-fullscreen-button {display: none;}
  • Note:
    • Does not work well in the Tile View widget.
    • Tested in Chrome 62.
  • Was this article helpful?