How fix/change css background color around the edge by full screen mode?

Question

How fix/change css background color around the edge by full screen mode? Where there is a camera, the color of the white background. I need a default black color.

where there is a front camera, the color of the white background

::fullscren and ::backdrop didn't help...

code to switch to fullscreen mode:

          var goFullScreen = null;
          var exitFullScreen = null;
          if ('requestFullscreen' in document.documentElement) {
            goFullScreen = 'requestFullscreen';
            exitFullScreen = 'exitFullscreen';
          } else if ('mozRequestFullScreen' in document.documentElement) {
            goFullScreen = 'mozRequestFullScreen';
            exitFullScreen = 'mozCancelFullScreen';
          } else if ('webkitRequestFullscreen' in document.documentElement) {
            goFullScreen = 'webkitRequestFullscreen';
            exitFullScreen = 'webkitExitFullscreen';
          } else if ('msRequestFullscreen') {
            goFullScreen = 'msRequestFullscreen';
            exitFullScreen = 'msExitFullscreen';
          }


document.documentElement[goFullScreen] && document.documentElement[goFullScreen]();

Answer 1

Without seeing the rest of your code, it’s unclear if this will work: try creating a div and using CSS, assign it absolute positioning with 100% width and height. You can assign it a background-color. Within your conditionals, you could toggle the visibility attribute of the div to hidden or visible depending on when exiting or entering full screen, respectively. You’d need to address the z-index of the div to properly layer it behind the full screen content.