Play/Pause/Live Buttons

  • Resolved zonaundertv

    (@zonaundertv)


    5 years, 2 months ago

    With the previous Pen theme update, the play/pause/live and ect. buttons changed from standard colors to orange with the white border. Now, the play/pause/live buttons displaying large, but the text within the button is unreadable. Is there a way for me to revert to a standard buttons?

    • This topic was modified 5 years, 2 months ago by zonaundertv.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Theme Author htmlpie

    (@htmlpie)

    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 5 years, 2 months ago by htmlpie.
    Thread Starter zonaundertv

    (@zonaundertv)

    Thank you. Provided code solved the issue.

    Thread Starter zonaundertv

    (@zonaundertv)

    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?

    Theme Author htmlpie

    (@htmlpie)

    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;
}
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Play/Pause/Live Buttons’ is closed to new replies.