html - 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 Number) (https://css-tricks.com/magic-numbers-in-css/)，这在 CSS 中是一件非常糟糕的事情。

iframe & Phone image 没有相关措施(第一个几乎是正方形，最后一个是垂直的)所以很难让它们相处。

由于所有这些原因，我的第一个答案是:好吧，这里有一个结构性问题，所有的工作都应该重新设计以消除所有那些 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

干杯:)