Make Video Stretch to Width of Webpage

[hotrodsue]

Hello! I am on a Windows 11 PC, with XDP X version X 19.

In the design gallery, I have chosen a “modern business website” template that is responsive.

There is an image that stretches the width of the webpage when you view in the browser. I would like to replace that image with a video and have it stretch the width of the website.

I see directions on how to go to Web sticky/stretchy for images. Is there something similar for video files? I’m using a stock video that is saved in .MP4.

Here is a website that shows the look I’m trying to achieve with a video: https://www.asphaltpavingsystems.com/

As always, I appreciate feedback from the experienced folks here.

[Acorn]

Hello! I am on a Windows 11 PC, with XDP X version X 19.
In the design gallery, I have chosen a “modern business website” template that is responsive.
There is an image that stretches the width of the webpage when you view in the browser. I would like to replace that image with a video and have it stretch the width of the website.
I see directions on how to go to Web sticky/stretchy for images. Is there something similar for video files? I’m using a stock video that is saved in .MP4.
Here is a website that shows the look I’m trying to achieve with a video: https://www.asphaltpavingsystems.com/
As always, I appreciate feedback from the experienced folks here.

Most use @Initiostar's excellent demo: https://initiostar.co.uk/demo/Video/banner.htm.

Acorn

[hotrodsue]

Acorn,

Thank you so much. I had spent some time searching Google and the forum here. Figured someone had a tutorial.

Sue

[hotrodsue]

Most use @Initiostar's excellent demo: https://initiostar.co.uk/demo/Video/banner.htm.

Acorn

Today, I finally have the opportunity to work with this demo, and making progress. When I get it the width of the page, then the height takes up more of the page than I want. Perhaps some preset elements of template I'm working in are hindering HTML code I've placed in header first, and currently in body placeholder. I still need to work on this some.

As I’m working on layout, I’m putting an image in the top navigation bar area. Two things I’m noticing/have questions on. Let me know if I need to start a different thread.

1) In Xara on the header and footer in the templates they are repeating. I’ve always been able to double click on header or footer and it would open in new tab to edit, save. Then that new tab closed and I’ll be back into my main Xara template page. I can still do that on older pages that I have saved, but on the new templates, like the one I’m working on now, when I double click, it does not do this.

2) Below is a screen cap where I place logo image up in the header area. The screen cap shows logo “LOMG” in the top left. It displays on the local host, but when I publish it, it is not showing up on the website. http://draft-review.com/



Any thoughts would be greatly appreciated.

Sue

[Initiostar]

Today, I finally have the opportunity to work with this demo, and making progress. When I get it the width of the page, then the height takes up more of the page than I want.

For a banner video you need to have a video proportionally around 1920px (w) x 500px (h) or less (h); I think your stock video is maybe 640px (w) x 360px (h). You would need to crop the video top and bottom; I am not sure about the quality here, but this is an image at 1920px x 600px

[hotrodsue]

For a banner video you need to have a video proportionally around 1920px (w) x 500px (h) or less (h); I think your stock video is maybe 640px (w) x 360px (h). You would need to crop the video top and bottom; I am not sure about the quality here, but this is an image at 1920px x 600px

Gary,

I appreciate your response, that makes sense. When I looked at it, it seem like I needed some off the top and the bottom.

Do you know the best way to crop video top and bottom?

I’m always happy to read or watch video tutorials. A quick search, I see Camtasia software which is $300. Looking for options before making any purchase.

Thanks,

Sue

[hotrodsue]

Gary,

I appreciate your response, that makes sense. When I looked at it, it seem like I needed some off the top and the bottom.

Do you know the best way to crop video top and bottom?

I’m always happy to read or watch video tutorials. A quick search, I see Camtasia software which is $300. Looking for options before making any purchase.

Thanks,

Sue

Gary,

I have Movavi Slideshow Maker 8, and it can crop videos! Thought I may have ability with one of the variety of software I already have. There are codec and resolution settings that can be adjusted.

The stock video is blurry, I will see if I can choose custom size and get clear video.

Many thanks,

Sue

[Acorn]

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:

<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

[hotrodsue]

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:

<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

[hotrodsue]

Acorn,

Working with your example, I did choose height of of 404px and adjusted that in code. Will you please look at it? http://draft-review.com/

There is some white space to left of video, it's not going full width. Is that perhaps something in template I'm working in? **UPDATE: It is not template, as I tried in blank page and still have white space.**

Also, following your directions I did first add video tag, then "Check it runs and loops in Preview. Ignore its position or size at the moment." Acorn, at this point video was clear. After adding placeholder head code, it seems not as clear. Any thoughts?

Many thanks,

Sue