响应视频与背景/边框

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>

IMAGE

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>