CSS 流体视频

Question

我正在尝试为我的投资组合网站构建响应式视频组件。

它本质上是一个移动应用视频，我将其放置在手机模型之上，但是，我的问题是我想在一个容器中屏蔽/裁剪它们，但仍然使它们具有响应性或流畅性。

我认为在包含的 div 上使用 Overflow hidden 是可行的，但是当我更改浏览器大小时，我希望包含 div 的高度能够保持屏蔽.

这里有一些图片来描述我的情况。

还有JS Fiddle

<section class="feed">
    <div class="feed-element">
        <div class="animation">
            <div class="screen">
                <div class='embed-container'>
                    <iframe src='https://player.vimeo.com/video/281167304?autoplay=1&loop=1&color=357ded&title=0&byline=0&portrait=0"' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
                </div>
            </div>
            <div class="phone">
                <img src="http://www.anthonyeamens.co.uk/test/images/iphone@2x.png">
            </div>
        </div>
    </div>
    <div class="feed-text">
        <h1>
      Title
      </h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
    </div>
</section>

Answer 1

好的，我会尝试这个解决方案。首先，这不是一个好的解决方案：它有很多 MAGIC NUMBERS (https://css-tricks.com/magic-numbers-in-css/)，这在 CSS 中是一件非常糟糕的事情。

iframe 和手机图像没有相关的度量（第一个几乎是正方形，最后一个是垂直的）所以很难让它们相处。

出于所有这些原因，我的第一个答案是：好吧，这里有一个结构性问题，应该重新设计所有工作以消除所有这些 hack&trick。

但是，我知道，这对您来说并不是一个真正的解决方案，因为您必须使用已经完成的视频和图像来完成您的工作。因此，为了帮助您，我保留了您创建的结构，并进行了非常小的更改：我在背景中转换了手机图像并删除了一些 div。 情况就是这样。

CSS：

.feed {
  max-width:1170px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 2.564102564102564%; /* how scary! (^_^;)  */
  grid-column: span 12;
  align-content:center;
  justify-content:center;
  align-items:center;
  margin: 50px 0px;
}

.feed-element {
  position: relative;
  grid-column: 1 / 7;
  overflow-y: hidden;
  background-color: #F6F6F6;

  background-image:url("http://www.anthonyeamens.co.uk/test/images/iphone@2x.png");
  background-size: auto 124%; /* MAGIC NUMBER */
  background-repeat:no-repeat;
  background-position: center -28%; /* MAGIC NUMBER */
}

.feed-text {
  grid-column: 7 / 13;
}

.animation {
  max-width: 370px; 
  margin: 0 auto;
}

.embed-container { 
  position: relative; 
  padding-bottom: 124%; /* MAGIC NUMBER */
  overflow:hidden; 
  margin-top: 22.84%;  /* MAGIC NUMBER  */
  margin-left:1px;     /* MAGIC NUMBER  */
} 

.embed-container iframe, .embed-container object, .embed-container embed { 
  position: absolute; 
  top: 8%; /* MAGIC NUMBER  */
  left: 0; 
  width: 100%; 
  height: 100%; 
}

@media only screen and (max-width:400px) {
  .feed-element {grid-column: span 12;}
  .feed-text {grid-column: span 12;}
}

这是HTML：

<section class="feed">
  <div class="feed-element">
    <div class="animation">
        <div class='embed-container'><iframe src='https://player.vimeo.com/video/281167304?autoplay=1&loop=1&color=357ded&title=0&byline=0&portrait=0"' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
    </div>
  </div>
  <div class="feed-text">
    <h1>Title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</section>

我不知道为什么，但是 Stackoverflow 代码片段在使用这些 CSS 和 HTML 时遇到了一些麻烦 - 可能是因为另一个 iframe 中有一个 iframe...或者只是因为 这不是一个好的解决方案... (^_^;)，但我在浏览器的正常情况下尝试过，它可以工作。

我还创建了一个 jsfiddle：https://jsfiddle.net/692hd1tL/5/

所以，如果你愿意，你可以使用这个解决方案，但是在这项工作之后......忘记了！绝对地！ :D

干杯:)