[SOLVED] How to hide a section on a HDR capable display

How to hide a section on a HDR capable display

Really not a coder but I am trying to make a website switch between HDR and SDR videos.

I am aware the "dynamic-range:" is pretty new but what is happening here is that:

for a SDR display it returns true for standard and false for high
For a HDR capable display it returns true for both high and standard

so that on a HDR display both SDR and HDR sections are shown. any hints on how to get around that?

<!DOCTYPE html>
<html>
<style>
h1{
  display: none;
}
@media only screen and (dynamic-range: high) {
  .hdr{
    display: block;
  }
}
@media (dynamic-range: standard) {
   .sdr {
        /* Styles for displays not capable of HDR. */
     display: block;
   }
}
</style>
<body style="background-color:DarkOrchid;">
<h1 class="hdr">
  HDR DETECTED
<video class="video" width="100%" autoplay loop muted playsinline>
  <source
    src="/video2/baloons_alpha_hevc.mov"
    type="video/quicktime">
  <source
    src="/video2/baloons_alpha_VP9.webm"
    type="video/webm">
  Your browser doesn't support HTML5 video tag.
</video>
</h1>
<h1 class="sdr">
  SDR detected ,  you should upgrade your stuff, boomer
<video class="video" width="100%" autoplay loop muted playsinline>
  <source
    src="/video2/baloons_alpha_hevc_sdr.mov"
    type="video/quicktime">
  <source
    src="/video2/baloons_alpha_VP9_sdr.webm"
    type="video/webm">
</video>
</h1>
</body>
</html>

Solution

You should be able to just do this in a single media query by replacing everything in your style block with the following:

.hdr {
  display: none;
}

@media only screen and (dynamic-range: high) {
  .hdr{
    display: block;
  }
  .sdr{
    display: none;
  }
}

Then you can remove the other media query and only one block should be visible at a time. (Note: I'm assuming your media query for detecting HDR capability is accurate.)