html - iOS 在 Shopify 中导致 overflow-x 问题 - iframe 比视口(viewport)宽

Question

我在 Shopify 中使用的 Iframe 有问题。我已将宽度设置为比视口(viewport)宽以解决宽高比问题，使其成为移动设备屏幕高度的 80% 左右。此问题专门针对 IOS。这是一个宽屏视频，所以这是我的“修复”，以使其在移动设备上以翻转的纵横比显示。

您必须在移动设备上访问网站才能显示滚动问题。当我最初测试网站的移动版本时，chrome 响应式预览功能出现零滚动问题。我试过:

添加:

• 溢出:隐藏!重要
• overflow-x:隐藏!重要

收件人:

• html，正文
• 内嵌 iframe
• html 内联中的每个容器

我尝试在具有这些属性的整个容器周围放置一个 div 我尝试使用 iframe 命令，如 scroll="no"和 overflow: hidden，基于此处的其他帖子。我认为大部分问题是绝对定位，但我在 CSS 方面经验不足，无法在保持与视频相同显示的同时找到解决方法。

我尝试在代码编辑器中尽我所能将代码放在一起，但只有你们去实际站点观看实时视频时它才真正起作用。

html,
body {
  overflow-x: hidden !important;
}

.vimeo-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  min-height: 72vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.vimeo-wrapper-content,
.vimeo-wrapper-content-bottom {
  z-index: 2;

}

.vimeo-wrapper iframe {
  width: 100vw;
  height: 56.25vw;
  min-height: 100vh;
  min-width: 177.77vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hbtn {
  position: relative;
  box-sizing: border-box;
  display: inline-block;
  overflow: hidden;
  padding: 9px 38px;
  margin: 20px 9px;
  text-align: center;
  border: 2px solid rgb(255, 255, 255);
  text-decoration: none;
  color: rgb(255, 255, 255);
  white-space: nowrap;
  z-index: 0;
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 2px;
  font-family: 'Poppins', arial, sans-serif;
  text-transform: uppercase;
}



.hb-fill-right::before {
  position: absolute;
  content: "";
  background: rgb(255, 255, 255);
  transition-duration: 0.3s;
  z-index: -1;
  top: 0px;
  right: auto;
  bottom: auto;
  left: 0px;
  width: 0px;
  height: 100%;
  opacity: 1;
}



.vimeo-wrapper-content-bottom {
  align-self: flex-end;
  width: 100%;
  background-color: rgba(25, 25, 25, 0.3);
  display: flex;
}

.hbtn-vimeo {
  min-width: 50%;
  min-height: 100%;
  height: 100px;
  width: 50%;
  align-items: center;
  justify-content: center;
  /* align-self: center; */
  display: flex;
  margin: 0;
  border-right-width: 1px;
  border-left-width: 1px;
  overflow: hidden;
  text-align: center;
  border: 2px solid rgb(255, 255, 255);
  text-decoration: none;
  color: rgb(255, 255, 255);
  white-space: nowrap;
  z-index: 0;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 2px;
  font-family: 'Poppins', arial, sans-serif;
  text-transform: uppercase;
}

<div class="vimeo-wrapper" style="overflow: hidden !important; overflow-x: hidden !important">
          <div class="vimeo-wrapper-content-bottom" style="overflow: hidden !important; overflow-x: hidden !important">
            <a href="https://www.luckyleodancewear.com/collections/video-lookbook" class="hbtn-vimeo hb-fill-right">Shop the video<i style="padding-left: 5px;" class="fa fa-angle-right"></i></a>
            <a href="https://www.luckyleodancewear.com/blogs/luckyleodancewear/behind-the-scenes-of-reflection" class="hbtn-vimeo hb-fill-right">Keep watching<i style="padding-left: 5px;" class="fa fa-angle-right"></i></a>
          </div>
          <iframe src="https://player.vimeo.com/video/354737357?background=1&autoplay=1&loop=1&byline=0&title=0" scroll="no" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        </div>

Answer 1

我想通了。我只需要完全重新编写代码。我在 iframe 上保持绝对值，但使用填充而不是对应于 vw/vh % 的最小高度将相对值放在视频包装器上。

.videowrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
  text-align: center;
}

.videowrapper iframe {
  width: 100vw;
  height: 56.25vw;
  min-height: 100vh;
  min-width: 177.77vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.videowrapper-content {
  position: absolute;
  top: 70%;
  left: 0;
  width: 100%;
}

<div class="videowrapper">
            <div class="videowrapper-content">
            <span class="lfg-h1 lfg-h1-ad-2 lfg-text-mobile-hide-2 wow animated fadeInDown delay-1s" style="padding-bottom: 10px;">Business Name</span>
            <a href="#" class="hbtn hb-fill-right wow animated fadeInDown delay-1s">Shop the video<i style="padding-left: 7px;" class="fa fa-angle-right"></i></a>
            <a href="#" class="hbtn hb-fill-right wow animated fadeInDown delay-1s">Keep watching<i style="padding-left: 7px;" class="fa fa-angle-right"></i></a>
         </div>
                   <iframe src="https://player.vimeo.com/video/355653150?background=1&autoplay=1&loop=1&byline=0&title=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

          </div>