css - 在 div 内移动视频

Question

我正在创建一个带有视频标题的网站。实现一切顺利。尽管有一件事进展不顺利。

实际上，我应该能够在 div 中重新定位视频，以便看到另一部分内容。 (见截图)

我想要的是视频会往上，这样我就可以看到视频的下半部分。

现在在 505px 高度之后有一个溢出。

有人可以帮我解决这个问题吗？

我使用的css:

#cover
{
    width: auto;
    height: 505px;
}

.header-unit1
{
    height: 505px;
    border-right:none;
    border-left: none;
    position: relative;
    padding: 20px;
}

#video-container1
{
    position: absolute;
    z-index:-10;
}

#video-container1
{
    top:0%;
    left:0%;
    height:505px;
    width:100%;
    overflow: hidden;
}

#testvid video
{
    position:absolute;
}

#testvid video.fillWidth1
{
    width: 100%;
}

任何提示都会很好!

Answer 1

以下是(我认为)您想要完成的总体思路:

HTML:

<div class="container">
   <video ...></video>
</div>

CSS:

.container {
   width:100%;
   height: 505px;
   position:relative;
   overflow:hidden;
}

video{
   max-width:100%;
   position:absolute;
   top:0px;
}

然后为视频顶部位置设置动画。您可以使用 Javascript 或添加另一个类，例如 video.animated { top: 50px; }