How to play fullscreen video when screen orientation is landscape

Hi,Everyone
I want to play fullscreen video by html video.
This is the my simulate and wanted screen.

But when i run it in real device and let screen orientation is landscape, it displays the following screen.

The edges of the video are cut off and footer down.
I don’t know why the screen simulation is different from the actual.

this is my css

.video {
        position: fixed;
        top: 39%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        transform: translateX(-50%) translateY(-50%);
      }  
     .footer{
        background-color: gray;
        height:10%;
     }

Please tell me how to solve this problem.