css - 在视频周围环绕图像(响应式)

Question

我想将笔记本电脑图片包裹在 YouTube 视频周围。我已经找到了解决方案。现在我想让所有东西都能响应较小的设备。有什么解决方案吗？

body {
  padding-top: 70px;
  /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
#tv_container {
  background: url('img/video.jpg') no-repeat top left transparent;
  width: 1440px; /* Adjust TV image width */
  height: 810px; /* Adjust TV image height */
  position: relative;
}
#tv_container iframe {
  position: absolute;

}
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
}
.videoWrapper iframe {
  position: relative;
  top: 78px;
  left: 252px;
  width: 65%;
  height: 67%;
}

<div class="container">
  <div id="tv_container">
    <div class="videoWrapper">
      <iframe width="760" height="315" src="https://www.youtube.com/embed/qidS1nnK0Ps" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
</div>

Answer 1

您应该更改 #tv_container 样式以使用可变宽度:

#tv_container {
    background: url('img/video.jpg') no-repeat top left transparent;
    width: 80%;
    height: auto;
    position: relative;
}

我还为容器使用了 auto 高度，因此它会根据宽度变化。