删除页面的一部分以显示背面的内容

Question

我正在尝试这种新的交互作用，该方法在网站的目标页面上有一个背景视频。

我正在使用HTML5视频，如下所示： HTML

<video autoplay loop id="video-background" muted plays-inline>
    <source src="https://player.vimeo.com/external/158148793.hd.mp4?s=8e8741dbee251d5c35a759718d4b0976fbf38b6f&profile_id=119&oauth2_token_id=57447761" type="video/mp4">
</video>

CSS

#video-background {
/*  making the video fullscreen  */
  position: fixed;
  right: 0; 
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  width: auto; 
  height: auto;
  z-index: 100;
}

在此视频的后面，有实际的网站上下文（带有文本和菜单等）。当用户将鼠标移到屏幕上时，我要按比例减少此视频部分的大小，以供用户查看后面的内容。类似于以下描述：

我已经看到这些CSS页面显示了人们翻页的动画，并且您已经可以在翻页下面看到下一页的内容。但是我不确定在这种情况下进行此切除的正确方法是什么。感谢您的提前答复。

PS我也很灵活地更改视频的显示方式（即如果不使用video标签等），如果有帮助的话。另外，要显示的视频和内容目前位于同一登录页面上，而不是两个不同的页面上。