Make Video Stretch to Width of Webpage

[Chris M]

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:

<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.

[Verissimo]

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]

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]

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]

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]

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.



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]

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]

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/

[Verissimo]

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.

[Initiostar]

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.