Make Video Stretch to Width of Webpage

[Acorn]

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

[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

[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

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

[hotrodsue]

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

[hotrodsue]

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!

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

[Acorn]

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