Html CSS流体视频

我正试图为我的投资组合网站构建一个响应迅速的视频组件

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

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

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

也是一个

标题

知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。

---

好的，我会试试这个解决方案。首先，这不是一个好的解决方案：有很多神奇的数字（），这在CSS中是一件非常糟糕的事情

Iframe和Phone图像没有相关的度量（第一个几乎是正方形，最后一个非常垂直），因此很难让它们相处

出于所有这些原因，我的第一个答案是：好的，这里有一个结构性问题，所有的工作都应该重新设计，以消除所有的黑客和诡计

然而，我知道，这对你来说不是一个真正的解决方案，因为你必须用你已经完成的视频和图像来完成你的工作。所以，为了帮助你，我保留了你创建的结构，只做了很小的改动：我在背景中转换了手机图像，删除了一些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。。。或者仅仅因为这不是一个好的解决方案。。。（^ ^；），但我在正常情况下用浏览器尝试了一下，效果很好

我还创建了一个JSFIDLE：

所以，你可以使用这个解决方案，如果你想的话，但是在这项工作之后忘了！当然D

---

干杯：）

这对你来说是个问题吗？你想看到“alpha溢出效应”还是只是一个让我们知道你想看到多少手机的例子？是的，图像中的alpha溢出只是为了显示我想在容器divOk中看到多少手机，那么直接裁剪该图像可能更简单。如果我必须做这项工作，我会从一个已经正确的图像开始，而不考虑如何制作非常复杂的面具，只显示其中的一部分。但这只是我的意见我明白你的意思，并感谢你的回复：）我希望我可以裁剪图像，但是通过裁剪图像，我需要裁剪手机顶部的视频，这样做我会有太多视频需要返工。我认为仅仅屏蔽它们是很容易的，但是想要它们有响应性也是非常困难的。为什么要重做你的视频呢？这就是你想要的吗？这绝对是完美的！正是我需要的！你是一个传奇：）非常感谢！我从这个练习中学到了很多。哈哈。。。一个传奇！你太夸张了！；）我教了你一些可怕的东西。顺便说一句，我很高兴能帮助你，安东尼；）嘿，里塞达诺，快速提问。。。您知道在离开视口时暂停视频的最佳方法吗？或者如果我在页面下有多个视频，我希望能够在视口中播放一个视频，在视口外暂停另一个视频？嗨，安东尼。我从来没有遇到过问题，所以我不知道“最好的方法”，但我告诉你我会怎么做。首先，我会使用这个jquery插件来检测视频是否在我的视口中，然后在

$（“.myVideo:in viewport”）上使用if语句我会使用still jquery播放或暂停视频。太棒了！非常感谢，里塞达诺，你帮了我很大的忙：）
<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>