Quote Originally Posted by Acorn View Post
Sue, I wouldn't crop and remaster any video, there is an easier method.

CSS - Cropped hero Videos.xar

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
Acorn,

Wow! Thank you SO much! I appreciate your feedback, detailed instructions and code.

I got sidetracked working with another customer, and I am back on this project now.

Many thanks!

Sue