这是正在发生的事情。我不希望我的视频是全宽的。我想要一个特定的宽度。当我更改宽度时,容器将视频发送到左侧。然后,当我放在中间时,它看起来很好......直到你放大和缩小并且 div/container/wrapper 移动视频。
我该如何解决这个问题?
当我放大和缩小时,如何防止我的视频 div/container/wrapper 移动?
视频直接位于导航栏下方,因此我确定它与页眉的 div/wrapper 宽度有关。请帮忙。
HTML
-->
<div class="video-background" id="video-background">
<video loop="loop" autoplay poster="{{ 'home-placeholder.jpg' | asset_url }}" width="100%">
<source src="{{ 'home.mp4' | asset_url }}" type="video/mp4">
<source src="{{ 'home.webm' | asset_url }}" type="video/webm">
<source src="{{ 'home.ogg' | asset_url }}" type="video/ogg">
<img alt="" src="{{ 'home-placeholder.jpg' | asset_url }}" width="640" height="360" title="No video playback capabilities, please download the video below">
</video>
<a href="#home-bubbles" class="skip-video" title="Scroll Down">Scroll Down</a>
</div>
和 CSS
div.video-background {
height: 100%;
left: 0;
overflow: hidden;
/*position: fixed;
top: 96px;*/
vertical-align: top;
width: 100%;
/*z-index: -1; */
margin-top:96px;
position:relative;
}
div.video-background video {
min-height: 100%;
min-width: 100%;
z-index: -2 !important;
}
div.video-background > div {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 10;
}
div.video-background .circle-overlay {
left: 50%;
margin-left: -590px;
position: absolute;
top: 120px;
}
div.video-background .ui-video-background {
display: none !important;
}
.index .sub-footer {
margin-top:0px;
}
最佳答案
我终于找到了这个问题的答案或修复。
我尝试了三种不同的方法。
- 在不同的屏幕间隔设置不同的px值
@media screen and (max-width: 1180px){
div.video-background video {
width:1000px;
}
}
@media screen and (max-width: 801px){
div.video-background video {
width:700px;
}
}
也试过
width:auto;
没有成功。
- 然后我尝试了 em
@media screen and (max-width: 75em){
div.video-background video {
width:50em;
}
}
@media screen and (max-width: 65em){
div.video-background video {
width:30em;
}
}
工作得更好但没有解决它。
- 我终于尝试了 vh 设置宽度和高度为 vh
@media screen and (max-width: 1180px){
div.video-background video {
width:60vh;
height:60vh;
}
}
@media screen and (max-width: 801px){
div.video-background video {
width:40vh;
height:40vh;
}
}
这解决了问题。请对这些值持保留态度,因为它们并不真正代表我使用的实际数字。但希望这在将来处理浏览器缩放、重叠元素和移动 div 时对您有所帮助。
关于html - 当我放大和缩小时,如何防止我的视频 div/container/wrapper 移动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34405038/