<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%;*/
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.