Hi there,
Interesting!
Please add the following CSS through Appearance -> Customize -> Additional CSS:
#primary .video-js button.vjs-button:before,
#primary .video-js button.vjs-big-play-button:before {
display: none;
}
#primary .video-js button.vjs-big-play-button,
#primary .video-js button.vjs-big-play-button:focus,
#primary .video-js button.vjs-big-play-button:hover,
#primary .video-js button.vjs-big-play-button:active,
#primary .video-js button.vjs-button,
#primary .video-js button.vjs-button:focus,
#primary .video-js button.vjs-button:hover,
#primary .video-js button.vjs-button:active {
background: transparent !important;
border-radius: 0 !important;
border: 0 none !important;
box-shadow: none !important;
padding: 0 !important;
}
-
This reply was modified 6 years, 5 months ago by
htmlpie.
Thank you. Provided code solved the issue.
I have another question concerning the Play button in the middle of the screen. The code you provided resolved the issue with the play/pause/live buttons on the bottom of the video screen, but when users load the page, there still a large Play button with the unreadable text/symbol in the middle of the video screen. Can you provide CSS code to increase the text/symbol within the button or change the Play button to a standard view?
Hi there,
Sure, add this after that CSS:
#primary .video-js .vjs-big-play-button:before,
#primary .video-js .vjs-play-control:before,
#primary .vjs-icon-play:before {
content: "" !important;
}
#primary .video-js .vjs-big-play-button .vjs-icon-placeholder:before,
#primary .video-js .vjs-play-control .vjs-icon-placeholder:before,
#primary .vjs-icon-play:before {
font-size: 3em !important;
}