<div class="wrap1">
  <video role="video" src="https://media.istockphoto.com/videos/road-in-seiser-alm-south-tyrol-video-id938786416" autoplay loop muted></video>
  <div class="btn1">КНОПКА</div>
</div>
<div>width: 480px; height: 270px</div>

<div class="wrap2">
  <video role="video" src="https://media.istockphoto.com/videos/road-in-seiser-alm-south-tyrol-video-id938786416" autoplay loop muted></video>
  <div class="btn2">КНОПКА</div>
</div>
<div>width: 270px; height: 480px</div>
.wrap1 {
  position: fixed;
  overflow: hidden;  
 	top: 5%; left: 5%;
 	width: 270px; height: 480px;    
}

.wrap2 {
  position: fixed;
  overflow: hidden;  
 	top: 15%;
  right: -5%;
  width: 480px; height: 270px;
  transform: rotate(-90deg);
}

video {
  overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;  
  width: 100%;
  height: 100%;
  object-fit: cover
}

.btn1 {
  z-index: 999;  
  display: inline-block;
	position: absolute;
	background-color: darkred;
	color: #fff;
  text-align: center;
  padding: 15px;
	bottom: 60px;
	left: 5%;
	right: 5%;	
}


.btn2 {
  z-index: 999;  
  display: inline-block;
	position: absolute;
	background-color: darkred;
	color: #fff;
  text-align: center;
  padding: 15px;
  /* Изменить нижние параметры */    
  bottom: 60px;
	left: 5%;
	right: 5%;
  /*transform: rotate(90deg) translate(-50%, -50%);
  transform-origin: 100% 100%;*/
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.