[Support request] Video background media query

Hi,

I have a Video background, when I add html to create Buttons and a Media size, the layout shifts.

/*BUTTONS Home Video*/
.button_video, .button_video:visited {  
	color: #ffffff;  
    background: transparent;   
	  font-size: 16px; 
	 padding: 12px 22px 12px 22px;
    border: 2px solid #ffffff; 
} 
.button_video:hover, 
.button_video:active {     
    background: #C58639;     
    color: #ffffff;     
    border: 2px solid transparent; 
}

When I add @media (max-width: 860px) and (min-width: 240px) {

The Layout goes crazy.

Here is the Element for the Video background:

<video loop muted autoplay playsinline poster="https://www.ra.com/wp-content/uploads/2020/02/feautured_image.jpg" class="background-video" id="myVideo">
    <source src="https://cdn.raf.com/wp-content/uploads/2020/02/video_back.mp4" type="video/mp4">
    <source src="https://cdn.raf.com/wp-content/uploads/2020/02/video_back.webm" type="video/webm">
    <source src="https://cdn.raf.com/wp-content/uploads/2020/02/video_back.ogv" type="video/ogv">
</video>

<div class="background-video-content">
<p style="text-align: center;"><a class="button_video" href="sms:1323385">Text Message</a>
<a class="button_video" href="mailto:rafa.com?subject=Magic Inquiry!"><span>Email Us</a></p>
</div>

How do I add code so the Buttons only appear on Mobile and the layout doesn’t shift??

Thanks