티스토리 뷰

You can inspect the controls of the native Chrome Video Player by activating the shadow DOM in Settings|Preferences -> Elements -> Show user agent shadow DOM

shadow dom

After that you can inspect the players buttons.

Player DOM

Now the problem is that the download button cannot be accessed via CSS for some reason.

video::-internal-media-controls-download-button {
    display:none;
}

won't work. Even selecting the preceding button and targeting its neighbor using + or ~ won't work.

The only way we found yet was nudging the button out of the viewable area by giving the control panel a greater width and making the enclosure overflow: hidden

video::-webkit-media-controls {
    overflow: hidden !important
}
video::-webkit-media-controls-enclosure {
    width: calc(100% + 32px);
    margin-left: auto;
}

 

댓글