Make Video Stretch to Width of Webpage

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.

Quote:

---

Originally Posted by 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.

---

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

Acorn

Acorn,

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

Sue

Quote:

---

Originally Posted by Acorn

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/

Attachment 133640

Any thoughts would be greatly appreciated.

Sue

Quote:

---

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

Attachment 133642

Quote:

---

Originally Posted by Initiostar

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

Attachment 133642

---

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

Quote:

---

Originally Posted by 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

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

Quote:

---

Originally Posted by Acorn

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

---

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

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

Sue, I did not mention that I also set the Placeholder to be Full Width - this balances everything.
It is needed as Xara centres the web page and it is being recalculated each time it is adjusted.

I set mine to 404px height with no problem.

You are playing a native 640px video scaled up.
If you reduce the browser width to just when you jump to the variant, you will see it render at native resolution and all is crispy.

Acorn

Acorn,

I appreciate your continued help. I did download the .xar file that you shared in your first post.

I’ve been working within a Web template. Also, I tried working in a new blank webpage. It seems like I’m getting close, and I’m all around it.

When I use your video source file in my blank page starting from scratch, teaching myself how to create it, it all looks like it supposed to.

Question: when you set a Placeholder to be Full Width, are you doing that under, “Web Sticky/Stretchy Properties”?
When I go to your .XAR file and check the property as your placeholder, it seems so.
However, when I do it on my placeholder in my page, it doesn’t fix the issue.

Many thanks for your help!

Sue

Quote:

---

Originally Posted by hotrodsue

Acorn,

I appreciate your continued help. I did download the .xar file that you shared in your first post.
I’ve been working within a Web template. Also, I tried working in a new blank webpage. It seems like I’m getting close, and I’m all around it.
When I use your video source file in my blank page starting from scratch, teaching myself how to create it, it all looks like it supposed to.
Question: when you set a Placeholder to be Full Width, are you doing that under, “Web Sticky/Stretchy Properties”?
When I go to your .XAR file and check the property as your placeholder, it seems so.
However, when I do it on my placeholder in my page, it doesn’t fix the issue.

Many thanks for your help! Sue

---

Sue, I don't think you've added in the transform: translate(-50%); bit, immediately before the end</script> Tag.

Clearly, I've not tested with Stickies and other parts in both the Main and the variant, assuming you just have the one variant.

Acorn

Acorn,

Oh my goodness! That's it!

I missed adding the transform: translate(-50%); bit.

I do have mobile variant, and giving that a go now.

Thank you so very much!

Sue

Now that I have the Video banner width displayed properly, one more issue.

In the body of page is text and image that are animated to “fade in” on the “Reveal/Scroll” tab of Web Animation dialogue box.

Since adding video banner yesterday, when scrolling down the page, the body text scrolls up and on top of video banner.

http://draft-review.com/

I will keep working on it. Any thoughts on how to fix this?

*UPDATE: I got it! On the header script, I set position: absolute;; rather than position: fixed;;

All seems to be working now!

Gent's, thank you for this post, this is something I'm looking for a long time to my website and i'm close to get there, however I think I'm doing something wrong, because if I use @Acorn solution, even if I add the transform: translate(-50%); bit I always have a wite space for one of the sides, the demo file work like a charm, but if I make a mobile variant it also doesn't work, in the main website.
If I use @initiostar code it works fine and if I change ""position: fixed"" to absolute it scrol up (as I want) Problem is that if I see in a 1920 x 1080 it look great, but if I see it in a wider screen or if I restore down the browser window size (play with size) it doesn't stretch like expected.

I wonder if there is some solution for this, I don't see a Xara widget for it, so I guess it must be done with a placeholder.
I must say, that even if I work with Xara for 10 years I'm not a expert with code, I only use it to build my business website.

I also have a dumm question, but how can I do to insert my video, is it from Vimeo, or Youtube? If so, can someone point me some to some link to see how I can do it?

Thank you very much.

Quote:

---

Originally Posted by Verissimo

Gent's, thank you for this post, this is something I'm looking for a long time to my website and i'm close to get there, however I think I'm doing something wrong, because if I use @Acorn solution, even if I add the transform: translate(-50%); bit I always have a wite space for one of the sides, the demo file work like a charm, but if I make a mobile variant it also doesn't work, in the main website.
If I use @initiostar code it works fine and if I change ""position: fixed"" to absolute it scrol up (as I want) Problem is that if I see in a 1920 x 1080 it look great, but if I see it in a wider screen or if I restore down the browser window size (play with size) it doesn't stretch like expected.

I wonder if there is some solution for this, I don't see a Xara widget for it, so I guess it must be done with a placeholder.
I must say, that even if I work with Xara for 10 years I'm not a expert with code, I only use it to build my business website.

I also have a dumm question, but how can I do to insert my video, is it from Vimeo, or Youtube? If so, can someone point me some to some link to see how I can do it?

Thank you very much.

---

Verissimo, you are probably using the same id in Main and Variant. Make each different.. You should get both working and the white space disappear.
This approach is for MP4 and not Vimeo or YT. Both add in their code and are not likely to then work. There may be on-line tools that can extract the mp4 path, which you can then apply.

Acorn

Quote:

---

Originally Posted by Acorn

Verissimo, you are probably using the same id in Main and Variant. Make each different.. You should get both working and the white space disappear.
This approach is for MP4 and not Vimeo or YT. Both add in their code and are not likely to then work. There may be on-line tools that can extract the mp4 path, which you can then apply.

Acorn

---

Hi again Acorn, and thank you for your answer. You are the best, it worked. =D>
I did from a blank page, created the variant 1st and then copy your placeholder. Since i'm not using a video for the mobile variantit is working as expected.
Just for reference, if I may, how can I check the id for variants you mention? if I'm thinking correctly, is in Body in this case - id="heroVideo-top" - and I must change the name here. But since I delet the placeholder from the variant, shouldn't it work as expected?


Now all I have to do is search where I can find the online tools to place my video.

Thanks again.

Quote:

---

Originally Posted by Verissimo

Hi again Acorn, and thank you for your answer. You are the best, it worked. =D>
I did from a blank page, created the variant 1st and then copy your placeholder. Since i'm not using a video for the mobile variantit is working as expected.
Just for reference, if I may, how can I check the id for variants you mention? if I'm thinking correctly, is in Body in this case - id="heroVideo-top" - and I must change the name here. But since I delet the placeholder from the variant, shouldn't it work as expected?

Now all I have to do is search where I can find the online tools to place my video.
Thanks again.

---

Verissimo, I was overthinking the solution. You do not need to change the ID, just have a Variant, even if it does not have a video.
You ought to be able to delete the Variant Placeholder.

Quote:

---

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.

---

What I did not stress if if you add in a Variant Placeholder, the IDs need to be different. I did mention it when placing multiple videos...
...yes, you change the ID value as you indicated.

Acorn

So, when I say above "Now all I have to do is search where I can find the online tools to place my video" I wasn´t expecting that it can be so complicated for my humble neurons.

If I´m understanding correctly, I must have my video running somewere in MP4 (that makes sense to me) now my problem is to make it run in loop, if, it has to be in HTML5. Since I don´t understand a line of code (even if I use it / modify ... sometimes).

I'm in the mood to learn some basics, enough to make the video and put it on some platform like videojs.com, but before doing that, and as for me it's a whole new world, before I start working on it, I'd like to know if anyone knows any platform or service, that even being paid, simplify my life.

Thank you all.

Ignore the bot. There are a few ways to do what you're after, my way is:
Upload the video file to your hosting taking note of the path (https://.....) and the name of the file.

In Xara, create a rectangle the size you want the player to be, select it, then Utilities > Web Properties > Placeholder (tab) > HTML Code (body)
Paste in the following:

Code:

---

<video controls="controls" playsinline controls autoplay disablepictureinpicture
poster="https://my-domain.com.au/sub-folder/Name-of-Poster.jpg"
width="100%" height="100%">
<source src="https://my-domain.com.au/name-of-video.mp4"
width="100%" height="100%" type="video/mp4" />

---

'Poster' refers to the first image before you press play.
Change the "https://my-domain.com.au/name-of-video.mp4" to the path and name of the video file you uploaded.

Thanks for the reply.
Chris, the code and how to do in Xara I understand, what I'm missing is how to upload the video to my hosting, or other in mp4 format. I'm using Magix online world, but I think it doesn't offer hosting service for mp4 video format. In my research I saw that I may have to use some platform like video.js, but it is a process that I'm not familiar with, so I must understand how it works.
Or am I overcomplicating things? Sorry, This is all new ground to me.

Sorry, can't help with Magix hosting. I simply upload via FTP, but I presume that isn't an option for some strange reason.

Verissimo, I've hardly used Magix hosting but you should be able to upload MP4's. Whether this link is still valid I don't know but you can use an FTP program to upload according to this:

LINK

Thank to you all. I finally got things working. In the end it was just drag and drop the mp4 video to a hidden page on my website, copy the video adress (from the hidden page). With Acorn code, I did some changes, pasted the video name in the code, et voila ....
So others like me (totaly noob's in html5, video.js, etc ... ) can do it I place here te example I did.

Attachment 133771

Quote:

---

Originally Posted by Verissimo

Thank to you all. I finally got things working. In the end it was just drag and drop the mp4 video to a hidden page on my website, copy the video address (from the hidden page). With Acorn code, I did some changes, pasted the video name in the code, et voila ....
So others like me (totally noob's in html5, video.js, etc . ) can do it I place here the example I did.

Attachment 133771

---

Verissimo,

Thank you for sharing your example here which I had a play with. Unfortunately, were a designer to opt to use the export option Scale-to-fit-Width there is a conflict between stretching a placeholder that contains a video and the option StfW e.g.

Attachment 133772

If you toggle StfW on and off you will see the conflict. Some designers would not be concerned with not using StfW, but it is very useful to many.

You video is sized as 1920 x 1080, but when previewed it has black bars top and bottom which can be seen when one adjusts the browser width. I took the liberty to remove these by cropping the video to 1920 x 824. The black bars are now gone and the file size is reduced from 41mb to 10mb:

https://initiostar.co.uk/demo/banner...s/1920-824.mp4

I modified a previous banner video demo to accommodate your video e.g. https://initiostar.co.uk/demo/banner-vid/

One can see StfW working across both a mobile and desktop variant where the desktop transitions to a proportionally sized video on the mobile variant.

There are no doubt many more ways to do this, but this would be my take on it.

Attachment 133773

Maybe it helps if you want to consider Scale-to-fit-Width?

The original demo is here: https://initiostar.co.uk/demo/Video/banner.htm

Quote:

---

Originally Posted by Initiostar

Verissimo,

Thank you for sharing your example here which I had a play with. Unfortunately, were a designer to opt to use the export option Scale-to-fit-Width there is a conflict between stretching a placeholder that contains a video and the option StfW e.g.

Attachment 133772

If you toggle StfW on and off you will see the conflict. Some designers would not be concerned with not using StfW, but it is very useful to many.

You video is sized as 1920 x 1080, but when previewed it has black bars top and bottom which can be seen when one adjusts the browser width. I took the liberty to remove these by cropping the video to 1920 x 824. The black bars are now gone and the file size is reduced from 41mb to 10mb:

https://initiostar.co.uk/demo/banner...s/1920-824.mp4

I modified a previous banner video demo to accommodate your video e.g. https://initiostar.co.uk/demo/banner-vid/

One can see StfW working across both a mobile and desktop variant where the desktop transitions to a proportionally sized video on the mobile variant.

There are no doubt many more ways to do this, but this would be my take on it.

Attachment 133773

Maybe it helps if you want to consider Scale-to-fit-Width?

The original demo is here: https://initiostar.co.uk/demo/Video/banner.htm

---

Thanks a lot, I was "fighting" with those black bars. =D> The way I found to deal with it is by hidde them with some text bar, but I guess it would always have problems, so, this is great.
Also, I assume that in order for the video scroll up just have to change position: fixed; to absolute, right?

Quote:

---

Originally Posted by Verissimo

Thanks a lot, I was "fighting" with those black bars. =D> The way I found to deal with it to hide them with some text bar, but I guess it would always have problems, so, this is great.
Also, I assume that in order for the video scroll up just have to change position: fixed; to absolute, right?

---

Your original video I suspect was not 1920 x 1080, but a custom export subsequently re-exported to a standard HD 1920 x 1080 video. Cropping just gets it back to where it probably started and smaller in size.

Correct > changing "fixed" to "absolute" will have the video scroll up and back in line with the page content; I have added a comment on my demo about using an opaque or transparent page cover when using "fixed" > for some designs you can use this approach to create a parallax effect with a fixed position video.

Updated: > https://initiostar.co.uk/demo/banner-vid/

Quote:

---

Originally Posted by Initiostar

Your original video I suspect was not 1920 x 1080, but a custom export subsequently re-exported to a standard HD 1920 x 1080 video. Cropping just gets it back to where it probably started and smaller in size.

Correct > changing "fixed" to "absolute" will have the video scroll up and back in line with the page content; I have added a comment on my demo about using an opaque or transparent page cover when using "fixed" > for some designs you can use this approach to create a parallax effect with a fixed position video.

Updated: > https://initiostar.co.uk/demo/banner-vid/

---

Sorry for the late answer.
Everything is working great with your model, it's exactly what I wanted.
If I may, I have another question. As your code is in the header of the page, I would like to know if it can conflict with the Analytics code, which should be in the header of the page too, if I'm not mistaken.
I used your code in the placeholder and it worked, but the mobile variant doesn't behave as it should.
Ultimately I'll make a still photo for the variant or use another placeholder, but since I got here with all the help I'm tempted to go a little further.

Quote:

---

Originally Posted by Verissimo

Sorry for the late answer.
Everything is working great with your model, it's exactly what I wanted.
[1] If I may, I have another question. As your code is in the header of the page, I would like to know if it can conflict with the Analytics code, which should be in the header of the page too, if I'm not mistaken.
[2] I used your code in the placeholder and it worked, but the mobile variant doesn't behave as it should.

Ultimately I'll make a still photo for the variant or use another placeholder, but since I got here with all the help I'm tempted to go a little further.

---

[1] This should be OK, but best to test.

[2] There should only be a placeholder in the mobile variant, not the desktop variant. This is my test site: https://initiostar.co.uk/demo/banner-vid/ (different video using fixed not absolute, but absolute would invoke a scroll). The mobile code can be seen when you squeeze the browser; it uses a simple video tag which should be in a mobile variant placeholder. You can as you suggest just use an image, but the video should work too.

I'm sure we can get it to work.

Quote:

---

Originally Posted by Initiostar

[1] This should be OK, but best to test.

[2] There should only be a placeholder in the mobile variant, not the desktop variant. This is my test site: https://initiostar.co.uk/demo/banner-vid/ (different video using fixed not absolute, but absolute would invoke a scroll). The mobile code can be seen when you squeeze the browser; it uses a simple video tag which should be in a mobile variant placeholder. You can as you suggest just use an image, but the video should work too.

I'm sure we can get it to work.

---

In fact, your solution works greatl, the reason I used the code in the placeholder is so as not to interfere with the Analytics code, and this is the case where the behavior is not as expected because I changed it without knowing what I'm doing, Sorry if I explained myself badly before, but like you said, I'll try.

Thank you again :)