在调整桌面显示以保持移动设备的完整性时遇到问题

Question

我有一个嵌入式视频，我用它 CSS 来响应移动设备。结果，我无法在不调整当前使视频响应的 CSS 的情况下将视频居中显示在桌面显示器上。在保持视频对移动设备响应的同时使视频居中的最佳方式是什么。

我试过摆弄 CSS 只是为了破坏我拥有的东西。

<style>
body,h1 {font-family: "Raleway", Arial, sans-serif}
h1,h2,h5 {letter-spacing: 6px}
.w3-row-padding img {margin-bottom: 12px}
.responsive-image {
  height: auto;
  width: 55%;
}

.video-container {
position: relative;
padding-bottom: 45.25%;
padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
max-width: 853px;
height: 100%;
max-height: 480px;
}

</style>

<div class="w3-center video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/dy85sXnsJDs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

我使用的是 w3 学校模板，所以 w3 中心是我所有内容的中心。

Answer 1

尝试将 left: 50%; transform: translateX(-50%); 添加到 iframe。

Answer 2

我认为你问了 2 个问题。

第一个是"how do you maintain a video's aspect ratio?"

<section class="section-name">

  <aside class="video">
    <iframe src="https://www.youtube.com/embed/dy85sXnsJDs"
      frameborder="0" width="560" height="315">  
    </iframe>
  </aside>

</section>

然后是"how do I center an element"

/* setup part a - the video aspect ratio */
.video {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 52%; /* arbitrary for now */
  border: 1px solid blue;
}

.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* part b - the 'centering an element' */
.section-name {
  display: flex;
  flex-direction: row;
  justify-content: center;
  border: 1px solid green;
}

.section-name .video {
  width: 600px;
}

但是 - 这很脆弱...我建议您改用 http://fitvidsjs.com/。

在调整桌面显示以保持移动设备的完整性时遇到问题

Having issues adjusting desktop display trying to keep the integrity of the mobile

html

css

responsive-design