Make Video Stretch to Width of Webpage

**Verissimo** · 21 June 2023, 08:41 AM

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.

**Chris M** · 21 June 2023, 09:40 AM

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

**Egg Bramhill** · 21 June 2023, 09:07 PM

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

**Verissimo** · 23 June 2023, 12:16 AM

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.

Video_banner.xar

**Initiostar** · 23 June 2023, 01:23 PM

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.

Video_banner.xar

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.

Click image for larger version.

Name: Scale-to-fit-Width-fail.jpg
Views: 23
Size: 69.2 KB
ID: 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.

Banner Video and Variants.xar

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

**Verissimo** · 25 June 2023, 10:32 AM

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.

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.

Banner Video and Variants.xar

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.

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?

**Initiostar** · 25 June 2023, 02:57 PM

Originally Posted by Verissimo

Thanks a lot, I was "fighting" with those black bars.

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/