css - 带背景/边框的响应式视频

Question

尝试将下图与电视屏幕内的视频一起使用并做出响应。在过去的几个小时里，我已经尝试过了，但也许我已经不知所措，或者对 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>

图像

https://jsfiddle.net/te921kws/3/

Answer 1

给你:

<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>