如何解决如何在窄显示器上居中显示视频
我有一个包含视频作为背景的 html page。问题出在窄屏幕上,因为它是右对齐的,所以内容在屏幕之外。如何将视频内容置于 video html 标签中?
解决方法
将此添加到您的 .video CSS
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
就变成了
#wrapper,video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
,
我完全修复了你的代码,CSS 中也有一个小问题,发音错误width & height。 这是结果:(阅读css代码的最后一行)(并将其他代码放入您的文件中我删除了它们)
body,html {
height: 100%;
width: 100%;
background-color: #000;
position: relative;
overflow: hidden;
font-family: Verdana,sans-serif;
color: #d0d0ff;
color: #ffa68d
}
#wrapper,video {
position: fixed;
right: 0;
top: 0;
min-width: 100%;
min-height: 100%
}
#wrapper {
background-color: rgba(0,.6);
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex-wrap: wrap
}
#wrapper #content {
padding: 75px;
font-size: 40px;
max-width: 550px
}
#wrapper #content h1 {
margin-top: 0
}
#wrapper #side {
padding: 75px;
font-size: 25px
}
#wrapper #side ul li {
list-style-type: none;
padding: 14px
}
#wrapper #side ul li a {
color: #ffa68d;
text-decoration: none
}
#wrapper #side ul li a:active,#wrapper #side ul li a:hover {
color: #ffd8ce;
text-shadow: 0 0 20px #ffc7b7
}
#wrapper .translateInit {
transform: translateY(-450px);
opacity: 0
}
#wrapper .translateInit-2 {
transform: translate(450px);
opacity: 0
}
#wrapper .translateInit-3 {
transform: translateY(450px);
opacity: 0
}
#wrapper .translateInit-4 {
transform: translate(-450px);
opacity: 0
}
#wrapper .translate {
transition: all .25s
}
.fs-40 {
font-size: 40px
}
.fs-30 {
font-size: 30px
}
.about-hover:hover {
color: #ffd8ce
}
@media (max-width:1020px) {
#wrapper {
flex-direction: column
}
#wrapper #content {
font-size: 25px !important;
padding: 25px;
text-align: center
}
#wrapper #side {
padding: 25px
}
#wrapper #side ul li {
padding: 7px;
text-align: center
}
.fs-30 {
font-size: 20px
}
video {
top: 0;
// You can change this perscentage as you want
right: -60%;
}
}
// Mobile First
@media screen and (max-width: 768px) {
video {
top: 0;
// You can change this perscentage as you want
right: -70%
}
}
<video autoplay="" muted="" loop="" __idm_id__="693906433">
<source src="https://tatrytec.eu/storage/homepage/vid1.mp4" type="video/mp4">
<p>Your browser doesn't support HTML5 video. Here is
a <a href="https://tatrytec.eu/myVideo.mp4">link to the video</a> instead.</p>
</video>
<div id="wrapper">
<div id="side" class="translate">
<ul>
<li><a href="https://tatrytec.eu/">Vitajte</a></li>
<li><a href="https://tatrytec.eu/about">O nás</a></li>
<li><a href="https://tatrytec.eu/contact">Kontakt</a></li>
<li><a href="https://tatrytec.eu/najnovsie">Blog</a></li>
</ul>
</div>
<div id="content">
<div id="welcome" class="translate">
<h1>Tatrytec.eu</h1>
<div>Let your dreams <br>come true...</div>
</div>
</div>
</div>
.video {
width: 100%;
height: 100%;
}
添加此代码
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。