更改或定义自托管 wordpress 视频的默认高度和宽度

Question

我手动将视频上传到我的 Wordpress 网站，我上传它们并使用 post 页面上的视频块功能将它们嵌入到 post 中。打开 post 后，视频不在容器中。宽 x 高为 1900x800px，运行从左到右覆盖了整个侧边栏，底部覆盖了相关的 posts 区域。

我希望视频具有默认高度（适用于所有视频）。当我检查元素以检查元素以便我可以使用自定义 css 修复它时，它显示以下内容

<video controls="" src="https://site/wp-content/uploads/2020/07/videoname.mp4"></video>

我尝试使用以下自定义 css（一一）

.video {
    width: 100px;
    height: 250px;
}

.video src {
    width: 100px;
    height: 250px;
}

.video control src {
    width: 100px;
    height: 250px;
 }

但是 none 这些改变了一切，视频播放器仍然是一样的。

没有 css 类，wordpress post 页面 html 显示了这个

<figure class="wp-block-video"><video controls src="https://site/wp-content/uploads/2020/07/videoname.mp4"></video></figure>

Answer 1

问题是您没有正确使用 CSS select 或者。您正在使用 .video 尝试 select <video> 元素。

到 select 一个元素，只使用元素标签名称，例如video、div、p 等
到 select class，在 class 名称前加上 . 例如.myvideoclass
到 select 具有特定 class 的元素，同时使用元素标签名称和 class（它们之间没有 as space），例如video.myvideoclass

所以在你的情况下，你会使用：

video {
    width: 100px;
    height: 250px;
}

如果您想使用 class，您可以将 class 添加到 html 中的视频元素（没有 .），然后 select CSS 中的 class 与 . 例如

<video class="myvideoclass" controls="" src="https://site/wp-content/uploads/2020/07/videoname.mp4"></video>

/* select any element with the class "myvideo" */
.myvideoclass{
    width: 100px;
    height: 250px;
}

/* Or to select ONLY video elements with the class "myvideo" */
video.myvideoclass{
    width: 100px;
    height: 250px;
}

我建议你做一些关于 CSS 的在线教程，了解你如何使用它，这是一个很好的起点：Mozilla Developer CSS tutorial

更改或定义自托管 wordpress 视频的默认高度和宽度

Changing or defining default height and width of self hosted wordpress videos

html

css

wordpress

html5-video