如何在 ExpressionEngine 中显示各种大小的 vimeo 视频（新视频将以前的视频推到新大小）

Question

我是 ExpressionEngine（以及其他代码语言）的初学者。无论如何，我正在创建一个视频教程网站，我已经设置了我的表达引擎网站，所以我在一个频道中有类别。这些类别将内容过滤到相应的页面。但是，我希望我的网站有一个精选视频，这将是最新发布的视频。一旦我发布了一个新视频，我希望它占据主要舞台并将之前的视频推到更小的尺寸。我使用 Vimeo 作为视频主机，所以所有视频都将在 Vimeo 上。

这是我主页中用于从旧内容中排序新内容的代码

{exp:channel:entries limit="10"}
<div class="main_feature">

{if count==1}
<div class="video_large">
{/if}

{if count !=1}
<div class="video_small">
{/if}

<h2>{video_tutorial_title}</h2>
{video_tutorial_link}
{video_tutorial_summary}


</div>
{/exp:channel:entries}

我让它们过滤成两种不同的样式。我的 CSS 看起来像这样...

.video_large {
    height: 960px;
    width: 640px;
}
.video_small {
    height: 180px;
    width: 320px;
}

输入我的新内容/视频时。我一直在使用每个视频中的嵌入代码，并从它们中删除高度和宽度，认为 div 然后会调整它的大小。看起来好像它将所有视频的大小调整为 180x340，但对于最新的视频，它看起来像是创建了一个 640x960 div，视频并没有填满整个 div。我希望我不需要任何插件或类似的东西。我希望它只是我忽略的一些基本的东西。任何帮助是极大的赞赏。谢谢！

Answer 1

有一个名为FitVids 的jQuery 解决方案。它是为使用流体设计的网站而设计的，但在这种情况下它也应该可以工作。它会调整目标容器（在您的情况下为 .main_feature）内的所有视频的大小以填充其父容器的宽度。

然后，您还可以从 CSS 中删除 height 声明（以便您可以容纳不同纵横比的视频）。

Answer 2

没有看到你的页面很难说，但我认为你必须将嵌入 iframe 的宽度和高度设置为 100%，然后它应该可以工作。