尝试将下图与电视屏幕内的视频一起使用并做出响应。在过去的几个小时里,我已经尝试过了,但也许我已经不知所措,或者对 CSS 的要求太多了。
有没有我不知道的方法可以做到这一点,我需要在调整浏览器大小以保持该位置时将视频定位在电视屏幕上。
尝试调整顶部和左侧位置但没有成功。这是我离开的地方,我不知道我需要查看或使用哪些属性。
CSS
#iss-television {
background: url('/images/ig-television_prop.jpg') no-repeat top left transparent;
background-size: contain;
height: auto;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: center;
}
#iss-television video {
text-align: center;
width: auto;
height: 100%;
top: 20%;
left: 10%;
}
HTML
<div class="row">
<div class="col-sm-12" id="iss-television">
<video poster="/video/iss-video_cover.jpg" controls="">
<source src="/video/video_iss.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
图像
最佳答案
给你:
<div class="row">
<div class="col-sm-12">
<div class="embed-responsive embed-responsive-16by9 text-center">
<video poster="/video/iss-video_cover.jpg" controls="" class="embed-responsive-item img img-responsive">
<source src="/video/video_iss.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
</div>
关于css - 带背景/边框的响应式视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28886518/