Wagtail嵌入视频尺寸调整问题咨询：自定义实现后仍无法调整大小

嘿，作为Wagtail新手碰到视频样式调整的问题太正常啦！我来帮你搞定这个事儿～

首先，我注意到你当前的代码里有个小问题：你用了StreamBlock来定义VideoBlock，但实际上你需要的是一组固定字段（标题、文本、嵌入视频）的组合，StructBlock才是更合适的选择（StreamBlock是用来添加多个不同类型的流式块的）。先修正这个，再调整视频尺寸就简单多了。

步骤1：修正Block定义 #

把blocks.py里的StreamBlock改成StructBlock，这样模板就能正确读取每个字段的值：

from wagtail.core import blocks
from wagtail.embeds.blocks import EmbedBlock

class VideoBlock(blocks.StructBlock):
    title = blocks.CharBlock(required=True, help_text="Add your Title")
    texts = blocks.TextBlock(required=True, help_text="Add your additional text")
    embed = EmbedBlock()

    class Meta:
        template = "streams/video_block.html"
        icon = "edit"
        label = "Video with Text"

步骤2：调整模板并控制视频尺寸 #

接下来修改video_block.html，这里提供两种常用的尺寸控制方式，按需选择：

方式一：固定宽度（适合需要固定尺寸的场景） #

直接在embed标签里指定width参数：

{% load wagtailembeds_tags %}

<div class="video-block">
    <h2>{{ self.title }}</h2>
    <p>{{ self.texts }}</p>
    <div class="video-container" style="text-align: center;">
        {% embed self.embed.url width=800 %}
    </div>
</div>

你可以把width=800改成你需要的数值，比如700、900等。

方式二：响应式视频（推荐，适配各种屏幕） #

通过CSS实现自适应宽高比，这是现在网站的主流做法：

首先更新模板：

{% load wagtailembeds_tags %}

<div class="video-block">
    <h2>{{ self.title }}</h2>
    <p>{{ self.texts }}</p>
    <div class="responsive-video">
        {% embed self.embed.url %}
    </div>
</div>

然后在你的项目CSS文件里添加以下样式（比如style.css）：

.responsive-video {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 宽高比，4:3的话改成75% */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    margin: 0 auto; /* 让视频居中 */
}

.responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

这样视频会自动适配容器宽度，在手机、平板和电脑上都能正常显示，而且保持正确的比例。

为什么之前的模板没生效？ #

你之前的模板里用了{%for content in self %}循环，这是因为StreamBlock返回的是块的集合，但你需要的是单个块里的三个字段，所以换成StructBlock后，直接通过self.title、self.texts、self.embed.url就能获取对应的值，不用循环啦。另外page.video_url也不是正确的取值，应该用self.embed.url来获取EmbedBlock里的视频链接。

内容的提问来源于stack exchange，提问作者neowenshun