Question

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

从本质上讲，这是一个移动应用程序视频，我将其放置在电话模型的顶部，但是我的问题是我想在容器中遮盖/裁剪它们，但仍使它们具有响应性或流畅性。

我发现在包含div上使用 隐藏溢出 是可行的，但是当我更改浏览器大小时，我希望包含div的高度保持屏蔽

以下是一些描述我情况的图片。

<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

干杯：）

CSS Fluid视频

1 个答案: