Twenty Twenty Four Theme

Firstly, it’s not a great idea to embed videos directly from your media library. The reason for this is that regardless of which browser or device is being used to look at the video, it will attempt to stream the file as-is. This is different to how video platforms (like YouTube) work as they will create different formats for different devices. A user looking at a video on their phone doesn’t need to stream a 4k video. You can also run into browser compatibility. So for example, depending on how the video is encoded it may load in Safari but not Firefox (and visa versa). It will also put tremendous strain on your server depending on how large the files are and how many visitors you have.

A better solution would be to use YouTube/Vimeo, or another provider who specialises in video streaming, or at least load the video from a CDN instead of your server.

Now that that’s out of the way, if you want to ensure the video is always the same aspect ratio you can use the aspect ratio property.

Assuming you’re using the default video embed in Gutenberg,

You would then simply apply

`.wp-block-video {
aspect-ratio: 16 / 9;
width: 100%;
}`

In terms of where you would ‘put’ this, it would usually go into the child theme but by the sounds of it you probably don’t have one. If you don’t have a child theme, you can use a plugin called WP Code (previously called Insert Headers and Footers) and use it to add the code to your pages. For that plugin specifically it would be called custom code, then you would set it as an html snippet. You would need to wrap it in a style tag

`<style>
.wp-block-video {
aspect-ratio: 16 / 9;
width: 100%;
}
</style>
`

If you can provide a link I can send you the exact code as it might be slightly different depending on how you’ve embedded it.