'Big ugly play button on FireFox or IOS

Does anyone know how to get rid of this big ugly PLAY button on FireFox or IOS when I add a video background to my Web site?

I tried adding all types of CSS, such as what I am posting here without success. I am out of ideas on my end. None of these CSS entries made a difference and the Button is still displayer as a nuisance.

        video:no-button {
        display: none !important;
        opacity: 0;
        position: absolute;
        z-index: -9999;
    }

    video::-webkit-media-controls {
        display: none !important;
        -webkit-appearance: none;
        opacity: 0;
        position: absolute;
        z-index: -9999;
    }

    video::-webkit-media-controls-panel {
        display: none !important;
        -webkit-appearance: none;
        opacity: 0;
        position: absolute;
        z-index: -9999;
    }

    video::--webkit-media-controls-play-button {
        display: none !important;
        -webkit-appearance: none;
        opacity: 0;
        position: absolute;
        z-index: -9999;
    }

    video::-webkit-media-controls-start-playback-button {
        display: none !important;
        -webkit-appearance: none;
        opacity: 0;
        position: absolute;
        z-index: -9999;
    }

/* This used to work for the parent element of button divs */
/* But it does not work with newer browsers, the below doesn't hide the play button parent div */

*::-webkit-media-controls-panel {
    display: none !important;
    -webkit-appearance: none;
}

/* Old shadow dom for play button */

*::-webkit-media-controls-play-button {
    display: none !important;
    -webkit-appearance: none;
}

/* New shadow dom for play button */

/* This one works! */

*::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
}

Here is the video object call that I am using:

<video poster="~/video/Bubbles596_150_2.gif" playsinline autoplay muted loop>
    <source src="~/video/1059946499-hd_1.mp4" type="video/mp4">
</video>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Big ugly play button on FireFox or IOS

Sources

Related Questions