I have a Brightcove player and I want to change the play button to a pause button, when the player is paused.

This is the player:

<div style=\"position: relative; display: block; max-width: 1515px;\"><div style=\"padding-top: 50.77574047954866%;\"><video id=\"myPlayerID3\" ' +
            ' data-video-id=\"' + data3.videoId + '\" ' +
            ' data-account=\"' + data3.accountId + '\" ' +
            ' data-player=\"' + data3.playerId + '\" ' +
            ' data-embed=\"default\" class=\"video-js\" ' +
            ' controls></video>

And this is the styling of the button:

    #myPlayerID3 .vjs-big-play-button {
        display: block;
        background: url(myurl) 25% center/contain no-repeat;
        right:0px;
        left:10%;
        top:68%;
        bottom:0;
        position:absolute;
        border-radius: 0;
        width:10%;
        height: 12%;
    }

And this is the code that handles the pause event:

$(document).ready(function() {
    var artist_video = document.querySelector("#artist_video");
    var artist_video_play_button = artist_video.querySelector(".vjs-big-play-button")
    videojs.getPlayer('myPlayerID3').on('pause',function(){
    artist_video_play_button.style.background = "url(myurl) 25% center/contain no-repeat";
    });

The code fires fine when the player is paused, but this happens:

The pause button appears, but the play button does not go away. And if I check the styles in developer tools, you can see that the "play" picture is marked as strikethrough (background property of #myPlayerID3), but it is still visible in the page:

If I uncheck the checkbox of the background style in developer tools, it goes away. Is this a rendering thing?

I've tried to remove the style like this

artist_video_play_button.removeAttribute("style");

or like this

artist_video_play_button.style.background = null;

But it did not work