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!