[英]Get div that has video to be the same relative size
在后续的div上遇到问题时,它们重叠了我正在播放的视频,而我想要的只是.home-video div中的h1来覆盖视频。 我在.home-video div上加了一个边框,可以看到我的问题。 我的div与视频的相对大小不同,后者会相对于屏幕大小更改其大小。 如何获取保存视频的div以匹配视频的大小?
html
<div class="home-video">
<h1>Travelogger <small>Keep track of the the places you have traveled to </small></h1>s
<video id="v" src="/views/img/Clip27.M4v" type="video/mov" autoplay loop muted>
</div>
的CSS
.home-video {
position: relative;
border: 5px solid black;
text-align: center;
}
.home-video #v {
width: 100%;
height: auto;
position: absolute;
z-index: -1;
top: 0;
left: 0;
}
.home-video h1 {
font-size: 3em;
color: white;
text-align: center;
padding-top: 1em;
}
除了固定视频的位置,您还可以固定标题的位置。
的HTML
<div class="home-video">
<h1>Travelogger <small>Keep track of the the places you have traveled to </small></h1>
<video id="v" src="/views/img/Clip27.M4v" type="video/mov" autoplay loop muted></video>
<div><p>Subsequent text is below the video</p></div>
</div>
<p>More text here</p>
的CSS
.home-video {
position: relative;
border: 5px solid black;
text-align: center;
}
.home-video #v {
width: 100%;
height: auto;
position: relative;
z-index: -1;
}
.home-video h1 {
font-size: 3em;
color: white;
text-align: center;
padding-top: 1em;
position:absolute;
top: 0;
left: 0;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.