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

[Verissimo]

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

[Acorn]

Hi again Acorn, and thank you for your answer. You are the best, it worked.
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.

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

[Verissimo]

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.