Question

我正在尝试在我的网站上制作3x3布局风格的视频。我有他们的反应，但我无法弄清楚中间如何在左右视频之间居中，以及如何在他们之间放置空间。另外，我想要左右边距，这样他们就不会碰到网页的边框。这是HTML和CSS： HTML：

<div class="video-layout">
<div class="video">
<div id="vid-left">
<iframe src="https://www.youtube.com/embed/qdIdPBIF6MU" frameborder="0" allowfullscreen></iframe>
</div>
<div id="vid-mid">
<iframe src="https://www.youtube.com/embed/qdIdPBIF6MU" frameborder="0" allowfullscreen></iframe>
</div>
<div id="vid-right">
<iframe src="https://www.youtube.com/embed/qdIdPBIF6MU" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>

CSS：

   .video {
    position: relative;
    padding-bottom: 56.25%;
}
.video iframe {
    position: absolute;
    width: 100%;
    height: 100%;
}
.video-layout {
    max-width: 500px;
    border: 1px solid green;
}
#vid-left {
    margin-left: 25px;
    float: left;
}
#vid-mid {

}
#vid-right {
    float: right;
}

Answer 1

以下是我对此的尝试：https://jsfiddle.net/w1mmLz4h/

CSS：

.video {
    position: relative;
    padding-bottom: 56.25%;
}
.video iframe {
    width: 100%;
    height: 100%;
}
.video-layout {
    max-width: 500px;
    border: 1px solid green;
}
#vid-left {
    float: left;
    padding:5px;
    width:33%;
    box-sizing:border-box;
}
#vid-mid {
    float: left;
    padding:5px;
    width:33%;
    box-sizing:border-box;
}
#vid-right {
    float: left;
    padding:5px;
    width:33%;
    box-sizing:border-box;
}

HTML：

<div class="video-layout">
<div class="video">
<div id="vid-left">
<iframe src="https://www.youtube.com/embed/qdIdPBIF6MU" frameborder="0" allowfullscreen></iframe>
</div>
<div id="vid-mid">
<iframe src="https://www.youtube.com/embed/qdIdPBIF6MU" frameborder="0" allowfullscreen></iframe>
</div>
<div id="vid-right">
<iframe src="https://www.youtube.com/embed/qdIdPBIF6MU" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>

Answer 2

使用OP的经典响应视频规则，然后将所有内容大致缩放到30％。
使用flexbox在每个视频和屏幕边缘之间保持相等的空间。
应用我正常使用的默认值。

它非常敏感，缩小它，放大它，称它为坏名字它只是一直在喋喋不休。它所需要的只是一个简单的媒体查询，使其在面向手机/平板电脑的肖像上显示时垂直叠加....

....好的，我添加了一个移动纵向方向的媒体查询。在测试时，请转到开发工具并使用手机模拟器，或者更好地在手机中查看; - ）

<强>段

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>35761650</title>
  <style>
    html {
      box-sizing: border-box;
      font: 500 16px/1.428'Raleway';
      height: 100vh;
      width: 100vw;
    }
    *,
    *:before,
    *:after {
      box-sizing: inherit;
      margin: 0;
      padding: 0;
    }
    body {
      position: relative;
      font-size: 1rem;
      line-height: 1;
      height: 100%;
      width: 100%;
      overflow-x: hidden;
      overflow-y: scroll;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      background: black;
      color: yellow;
    }
    .video {
      position: relative;
      padding-bottom: 56.25%;
      height: 16vh;
      width: 30vw;
    }
    .video iframe {
      position: absolute;
      width: 100%;
      height: 56.25%;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
    }
    .videoFrame {
      position: relative;
      display: flex;
      flex-flow: row nowrap;
      width: 100vw;
      border: 1px solid green;
      height: 100vh;
      overflow-y: hidden;
      overflow-x: scroll;
      justify-content: space-around;
      margin: 0 auto;
      padding: 12vh 0;
    }
    @media screen and (max-device-width: 768px) {
      .videoFrame {
        flex-flow: column nowrap;
        overflow-y: scroll;
        overflow-x: hidden;
        align-items: center;
        margin: 0 auto;
        padding: 0;
      }
      .video {
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        width: 100vw;
      }
      .video iframe {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
      }
    }
  </style>
</head>

<body>

  <div class="videoFrame">
    <div class="video">
      <iframe src="https://www.youtube.com/embed/qdIdPBIF6MU" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class="video">
      <iframe src="https://www.youtube.com/embed/qdIdPBIF6MU" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class="video">
      <iframe src="https://www.youtube.com/embed/qdIdPBIF6MU" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
</body>

</html>

HTML5和CSS3 - 如何并排制作视频并做出响应

2 个答案: