Replace play icon with custom image, video js

Question

I need to change the big play button in center, Video js , with a custom png play button. How can i achieve this. I didn't find any styles in videojs css. Is it defined from font

Answer 1

It is defined via CSS. There is a class on the video component, called .vjs-big-play-button. Here you can define a new background image. Be sure to look into the :before and :hover properties of this class also.

Here's a code example I have put in place to handle both mobile and desktop video play button:

    .vjs-big-play-button {
      background-color: transparent;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: url('myimage.png');
      background-repeat: no-repeat;
      background-size: 46px;
      background-position: 50% calc(50% - 10px);
      border: none !important; // @stylint ignore
      box-shadow: none !important; // @stylint ignore
      &:before {
        content: "";
        display: none;
      }
      &:hover {
        background-color: transparent;
        opacity: .7;
      }
    }