FireFox 或 IOS 上丑陋的大播放按钮

Question

当我向网站添加视频背景时，有谁知道如何在 FireFox 或 IOS 上去掉这个又大又丑的 PLAY 按钮？

我尝试添加所有类型的 CSS，例如我在这里发布的内容，但没有成功。我没有想法了。这些 CSS 条目都没有任何区别，按钮仍然是令人讨厌的显示器。

        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;
}

这是我正在使用的视频对象调用：

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