Wordpress embedded mp4 Video controls display quickly then disappear on Desktop but not mobile

I am using a custom WordPress template page to display a video that autoplays and should have controls displayed for the user to use when they mouse over the video.

When using a desktop browser the video autoplays as expected without sound but the controls flash on the screen really quickly and I can not get them to appear again unless I resize my browser window to a smaller size.

The video controls work as expected on mobile and when resizing the browser to a smaller size only.

How do I fix it so that the video controls display no matter what the browser size when a user mouses over the video?

I'm not getting any errors and I also tried iframing the video but then nothing shows up.

I also tried removing the bootstrap classes embed-responsive and embed-responsive-16by9 and still no fix.

          <div class="row" id="image-area">
                    <div class="col-md-10 offset-md-2">
                        <div class="image-container">
                            <img loading="lazy" width="1084" height="722" 
         alt="Background Video" class="d-none" src="

    
           <?php echo 
           get_stylesheet_directory_uri(); ?>/report/img/ar-s01-video.png" />
                            <div class="embed-responsive embed-responsive-16by9">
                                <?php if(get_field('video')) : ?>
                                    <video id="newVideo" controls 
           class="video-fluid z-depth-1" autoplay loop muted playsinline>
                                    <source src="<?php echo get_field('video')['url']; ? 
           >" type="<?php echo get_field('video')['mime_type']; ?>" />
                                  </video>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="container mobile" id="content-area">
                
                        
                            <h1><?php echo get_field('title_mobile'); ?></h1>
                        </div>
                    </div>
                </div>
                <div class="row" id="image-area">
                    <div class="col-md-12">
                        <div class="image-container">
                            <img loading="lazy" width="1084" height="722" 
            alt="Background Video" class="d-none" src="<?php echo 
            get_stylesheet_directory_uri(); ?>/report/img/ar-s01-video.png" />
                            <div class="embed-responsive embed-responsive-16by9">
                              <?php if(get_field('video')) : ?>
                                  <video id="newVideo" controls class="video-fluid z- 
           depth-1" autoplay loop muted playsinline>
                                    <source src="<?php echo get_field('video')['url']; ? 
            >" type="<?php echo get_field('video')['mime_type']; ?>" />
                                  </video>
                              <?php endif; ?>
                            </div>
                        </div>
                    </div>
                </div>