javascriptcssbrightcove

Element shows as removed in developer tools, but is still present visually in the page

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: enter image description here

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:

enter image description here

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

Solution

  • The problem was that brightcove spawns a button while dumping HTML code in the page and that button takes the classes of the div (which is also acting as the button) and therefore it's styles. The solution was to remove the button altogether, after brightcove spawned it's HTML stuff, meaning after $(document).ready(function() =>{})

    In the end we decided to drop brightcove and switch to CDN and simple HTML5 video tags, because this concept of brightcove spawning HTML code while the page is rendering was introducing a considerable amount of problems with customization