это невозможно сделать или что-то?все утро работал над тем, чтобы расположить мое видео по центру или изменить размер видео на маленький, чтобы оно могло вместить как минимум ключевые части видео, чтобы пользователь мог видеть его на своем мобильном телефоне.Каково лучшее решение для этого?Я много исследовал и не могу найти никакой помощи по этому вопросу и заставляет задуматься, может быть, это слишком много, чтобы просить в CSS?если нет другой альтернативы ... пожалуйста, дайте мне знать!большое спасибо!
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Courier New', Courier, monospace;
font-size: 1rem;
line-height: 1.5;
color: #333;
overflow-x: hidden;
background-color: whitesmoke;
}
.para {
font-size: 1.5em;
margin: auto 10px;;
}
.v-header {
height: 99vh;
display: flex;
align-items: center;
color: #fff;
}
#jsc {
/*display: none;*/
}
.container {
max-width: 960px;
padding-left: 1rem;
padding-left: 1rem;
margin: auto;
text-align: center;
}
.container h1 {
font-size: 2.5em;
}
section {
display: flex;
}
.fullscreen-video-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
}
.fullscreen-video-wrap video {
min-width: 100%;
min-height: 100%;
}
#heading {
font-family: 'Coiny', cursive;
color: white;
font-size: 3rem;
display: none;
}
.header-overlay {
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
background: #225470;
z-index: 1;
opacity: 0.65;
}
.header-content {
z-index: 2;
}
.header-content .jsc {
margin-bottom: 0;
}
.header-content .jsc {
font-size: 1.5rem;
display: block;
padding-bottom: 2rem;
}
.btn {
background: #34b3a0;
color: #fff;
font-size: 1.2rem;
padding: 1rem 2rem;
text-decoration: none;
}
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) {
#jsc {
height: 150px;
width: 150px;
}
.fullscreen-video-wrap {
position: absolute;
top: 50px;
right: 100px;
}
}
<div class="fullscreen-video-wrap">
<video src="seaturtle.mp4" autoplay="true" loop="true" muted="true"></video>
</div>
<div class="header-overlay"></div>
<div class="header-content">
<img id="jsc" src="jscc.png">
<h3 id="heading">Personal Training</h3>
<a href="#" class="btn">Contact Me</a>
</div>
</header>