Question

我正在建立一个网站，而我正在使用的两个视频重叠，我不知道为什么。我正在使用两节课，但我已经离开了顶部和左侧，但仍然超出了圈数。我也很好奇为什么视频不是小而被切出。该视频将播放该视频的上半部或下半部，但我真正的问题是两个视频为什么会重叠以及如何修复。

@media only screen and (max-device-width:480px) {
  /* styles for mobile browsers smaller than 480px; (iPhone) */
  .center {
    width: 300px;
    height: 100px;
    position: fixed;
    /*left: 48.5%;
      top: 44%;*/
    transform: translate(-50%, -50%);
  }
  .embed-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.27198%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }
}

.embed-container iframe {
  position: absolute;
  width: 50%;
  height: 50%
}

<!--stackover flow trying to get the videos to shirnk when using mobile devices. need to be done for "ipad" and cell phones from my knowlegde computers are fine. -->
<p align="center">
  <div class="embed-container">
    <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fwhereisslice%2Fvideos%2F1034464440067039%2F&show_text=0&width=560">
				</iframe>
  </div>
</p>
<p align="center">
  <div class="embed-container">
    <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FTimeOutForMeInc%2Fvideos%2F526931557744638%2F&show_text=0&width=267">
				</iframe>
  </div>
</p>

Answer 1

要回答第一个问题，就好像您将视频设置为绝对位置。从班级.embed-container iframe中删除该排名规则将使视频相互叠加。

为什么视频本身被截断是因为您也限制了.embed-container iframe中的hight属性。如果您在iFrame中检查视频播放，您会注意到Facebook将其设置为高像素。您应该可以通过删除.embed-container iframe

中的设置高度来解决此问题

为什么我正在使用的两个视频相互重叠？

1 个答案: