Sue, I wouldn't crop and remaster any video, there is an easier method.
Attachment 133644
Put a Placeholder in position on the page.
Its width is unimportant as it is going to be Stretched.
Next decide on its height. I chose 240px.
Add its <video> Tag to the Placeholder Body:
<video autoplay loop muted playsinline id="
heroVideo"><source src="https://cdn.glitch.me/94aeb0f1-3796-4bdf-acdd-ccba5a23cfbf%2Fdesktop.mp4"></video>
Check it runs and loops in Preview. Ignore its position or size at the moment.
In the Placeholder Head, add:
Code:
<style>
#heroVideo {
position: fixed;;
min-width: 100vw;
height: 240px;
object-fit: cover;
object-position: 50% 50%;
}
</style>
If you intend to run more than one (don't), but if you did, change
heroVideo, to be different for each one.
My example has different values set for the object-position:
- Red: #heroVideo-top { object-position: 50% 0%; }
- Green: #heroVideo-middle { object-position: 50% 50%; }
- Blue: #heroVideo-bottom { object-position: 50% 100%; }
Obviously tune yours to suit.
The Placeholder can be move up or down the page.
The Hero Video stretches from this position.
If you include a single Variant, then even if not including a Hero Video (don't), then you need to add
transform: translate(-50%); to the CSS style code.
Acorn