html - 视频宽度修复和视频上的文本定位以及使文本移动响应
问题描述
我已经尝试定位文本中心,它们对齐中心但在左侧。我希望它与网站中心对齐。此外,视频离开页面时溢出,其中我练习过的其他视频对 width:100% 反应良好,但这不起作用。最后,我仍然希望有人帮助我使整个部分具有移动响应能力。谢谢。
.outer-container {
width: 100%;
height: 100%;
}
.inner-container {
display: inline-block;
position: relative;
width: 100%;
}
.video-overlay {
position: absolute;
margin-top: 2rem;
font-family: 'calibri';
color: #FFF;
}
.video-overlay h1, h4, h6 {
font-family: 'calibri';
color: #fff;
text-align: center;
}
.video-overlay
video {
margin-top: 100px;
width: 100%;
height: 100%;
}
<section>
<div class="outer-container text-center">
<div class="inner-container">
<div class="video-overlay">
<h4>"Its better to travel well than to arrive"</h4>
<h1>Dream . Travel . Explore</h1>
<i><h6>"<b>Video by: </b> www.standupfornature.org"</h6></i>
</div>
<video id="player" src="https://cdn.videvo.net/videvo_files/video/free/2019-11/small_watermarked/190301_1_25_11_preview.webm" autoplay muted loop></video>
</div>
</div>
</section>
解决方案
.video-overlay
你的 CSS 中有一个额外的东西。- 我已从
margin-top: 100px
视频中删除(只是为了更清楚) - 我使用
translateY
属性将文本垂直居中。 - 我已将
.video-overlay
文本内容设置为 100% 宽度并居中对齐text-align: center
。
.outer-container {
width: 100%;
height: 100%;
}
.inner-container {
display: inline-block;
position: relative;
width: 100%;
}
.video-overlay {
position: absolute;
width: 100%;
text-align: center;
top: 50%;
transform: translateY(-50%);
font-family: 'calibri';
color: #FFF;
}
.video-overlay h1, h4, h6 {
font-family: 'calibri';
color: #fff;
text-align: center;
}
video {
width: 100%;
height: 100%;
}
<section>
<div class="outer-container text-center">
<div class="inner-container">
<div class="video-overlay">
<h4>"Its better to travel well than to arrive"</h4>
<h1>Dream . Travel . Explore</h1>
<i><h6>"<b>Video by: </b> www.standupfornature.org"</h6></i>
</div>
<video id="player" src="https://cdn.videvo.net/videvo_files/video/free/2019-11/small_watermarked/190301_1_25_11_preview.webm" autoplay muted loop></video>
</div>
</div>
</section>
推荐阅读
- reactjs - 反应无限滚动
- python-3.x - smote.fit_sample() 和 smote.fit_resample() 的区别
- html - HTML 电子邮件被空白包围(仅在移动设备上)
- c# - C# 反射 - 缺少字段?
- opengl - 无法在 Jupyerhub 上使用 opengl 多重映射
- javascript - 是否可以连接方法,如排序。shift、pop、push 和 unshift
- spring-boot - JPA @PostUpdate 监听回调方法可以异步执行吗?
- amazon-web-services - Outbond 规则哪个目的地是它本身?
- java - 如何在 Java 中简化印度地区的字符串?(问题扩展)
- splunk - Splunk : 在 splunk 中查找前 1000 名的百分比