I’ve tried deactivating all the plugins in a duplicate test site–but that didn’t solve the issue. None of the plugins are involved with design (gravity forms, Jetpack, google analytics, etc)
Hi @rebeccaprf,
Have you checked it on your test site with the default theme (2024 or 2025)? It may help to track the issue.
Refer to the following tutorial for more details: https://learn.wordpress.org/lesson/embedding-media-and-third-party-content-on-your-website/
With Magnitude 2021, you’re using a custom theme. It contains the following CSS property:
video.wp-block-cover__video-background { transform: translateX(-50%) translateY(-50%); }
Once this is removed, the video will be displayed full-screen. More specifically, the code is located in this file: /wp-content/themes/magnitude2021/assets/css/styles.css
My recommendation would therefore be:
1. Check why this property exists in the first place. It may be relevant for displaying videos in that specific location.
2. Contact the person who provided you with the theme. They should either adjust the code or provide an exception so that your video displays correctly.
@threadi Thanks for the suggestions. I’ll see what I can find out by modifying the theme file in a test environment. I’ve also reached out to the developer.
Rather than editing the theme’s styles.css (an update would wipe it), put the override in a child theme or Additional CSS. Reset the transform on that video and give it full width and height with object-fit: cover. Test with the cover block set to ‘full width’, since the original rule may exist for the narrow layout.