0

我有一个链接，单击时需要向上或向下滑动（取决于状态）一个包含响应式全宽视频的 DIV。由于它的响应性和宽屏视频，高度无法固定（我现有的代码会这样做并且需要更改）。此 DIV（包含视频）必须在页面加载时隐藏。

我在这里有我现有的代码：http: //jsfiddle.net/D5EMp/它在一定程度上可以隐藏/显示视频。但是，主要问题是视频的高度在页面加载时可见并创建了一个空白区域。

我需要视频向下/向上滑动并从水平黑条淡入/淡出，而该区域下方的内容在 showreel 状态发生变化时被向下推或向上拉。

一个好处是添加功能，当单击链接时，页面滚动到该打开的 DIV。

4

2 回答 2

3

您在 css 中添加的填充导致了差距：

padding-bottom: 56.25%; /* 16/9 ratio */
padding-top: 30px; /* IE6 workaround*/

您可以在显示此填充时对其进行动画处理，例如此处，但这似乎会导致视频在 Firefox 上变得混乱。

在尝试动画到该高度之前，我会计算正确的高度，并且根本不使用填充。要获得 16/9 视频的正确高度，只需将宽度除以 16，然后将其乘以 9。工作示例：

http://jsfiddle.net/D5EMp/2/

要将页面自动滚动到视频顶部，您可以将其作为动画的完整功能：

function(){$('html, body').scrollTop($('#showreel').offset().top);}

示例：http: //jsfiddle.net/D5EMp/4/

于 2012-09-17T11:11:03.710 回答
0

空格来自您在#showreel 上设置的填充，只需将其删除即可。

看看http://jsfiddle.net/D5EMp/1/

最大的问题是如何知道视频的大小。但在我看来，在加载之前不可能知道视频的大小。并且访问iframe会导致一些跨域问题。

em，你可以寻找另一种方法来解决这个问题，而不仅仅是通过技术

这是我的想法

于 2012-09-17T10:59:36.890 回答