TechDex's "Problem Solved" Version

In his report on stackoverflow about the modifications that "solved" his problem, TechDex says that modifying the CSS from VC.One fixed the look of his video player.

The Discussion on stackoverflow

The modified CSS that TechDex posted:

    video::-webkit-media-controls-enclosure {
        width:100%;
        background-color:transparent;
        -moz-border-radius: 1px !important;
        -webkit-border-radius: 1px !important;
        border-radius: 1px !important;
        filter: alpha(opacity=80);
        opacity: 0.8;
        margin-bottom:-20px;
        overflow: hidden;
    } 

    video::-webkit-media-controls-panel {
        background-color: #eee;
        height:35px !important;
    }

TechDex does not say what HTML he used to include the video so I'll use both the modified version of the HTML that VC.One suggested, TechDex's original HTML, and the HTML that worked on the home page.

1. VC.One's HTML

Here is a reminder of the HTML that VC.One used, with the actual HTML just below:

    <video width="350" height="240" oncontextmenu="return false;"
        playsinline muted autoplay loop
        disablepictureinpicture
        controls controlsList="nodownload noplaybackrate noremoteplayback ">
        <source src="video.mp4" type="video/mp4">
    </video>

It includes "autoplay loop" so the video starts playing automatically. As you will see, the control panel is at the top of the video. The only control that is visible is the progress bar. If you click around on the right edge, you might hit the area that switches to full-screen mode.

2. TechDex's HTML

Here is a display of his HTML:

    <video width="350" height="240">
        <source src="video.mp4" type="video/mp4">
    </video>

Here is what it yields on the page--a blank area that shows nothing.

3. The HTML That Worked on the Home Page

Here once again is a display of the HTML from the homepage.

    <video controls width="640" poster="poster.jpg">
        <source src="video.mp4" type="video/mp4">
    </video>

Here is what it generates. Once again, the control panel is at the top of the video. Controls other than the progress bar are hidden. If you click around, you can probably find the play/stop button and the button that switches to full-screen.

Verdict

It is possible that these purported solutions never worked. It is also possible that they worked with the version of Chrome/Chromium that was available 8 months ago, in April 2023.

What is clear is that none of these "solutions" are close to being workable in Jan 2024. None of them resemble even remotely the image that TechDex included in his stackoverflow post to illustrate the look of his purported solution.