Headline Video Banner

Fill Page Width Video Header

This is a demo using Xara Pro X v19.0 (backward compatible to v16.3). There are two variants 1200px (desktop) and 480px (mobile) with Web Export Option Scale-to-Fit-Width set at a maximum 1200px (same width as the desktop variant). Fill Video Page Width - the video is proportionally sized (e.g. 1200px x 269px) to create a banner that spans the page width. It uses a placeholder on the Page that has the same width and height proportionally as the video. Fill Browser Width Banner, Background and Intro Video - all use HTML/ CSS code that is placed in the Page HTML Head. This enables the videos to run across multiple variants using the same Page Head code. The Banner video settings for Width and Height are “min- width” and “auto” and the Full Browser editions are set to “min-width” and “min-height”. Depending on the content of the video and what you want the visitor to see, it can be set to start from the “top” or “bottom” of the browser, but should be set to start “left”. This latter appears necessary where you have set Xara’s ‘Scale-to-Fit-Width’ option (available from v16.3 onwards). A video fill browser setup using a page placeholder only works where ‘Scale-to-Fit is turned off (that is unless you have additional code to compensate for its behaviour). Using HTML body HTML/CSS simplifies the approach. Any part of the video can be masked by placing content on the page; opacity can be adjusted to reveal the background video as required.

<video width="100%" height="auto" autoplay loop playsinline muted> <source src="https://initiostar.co.uk/assets/beach banner.mp4" type="video/mp4"> </video>

This is a demo using Xara Pro X v19.0 (backward compatible to v16.3). There are two variants 1200px (desktop) and 480px (mobile) with Web Export Option Scale-to-Fit-Width set at a maximum 1200px (same width as the desktop variant). Fill Video Page Width - the video is proportionally sized (e.g. 1200px x 269px) to create a banner that spans the page width. It uses a placeholder on the Page that has the same width and height proportionally as the video. Fill Browser Width Banner, Background and Intro Video - all use HTML/ CSS code that is placed in the Page HTML Head. This enables the videos to run across multiple variants using the same Page Head code. The Banner video settings for Width and Height are “min-width” and “auto” and the Full Browser editions are set to “min-width” and “min-height”. Depending on the content of the video and what you want the visitor to see, it can be set to start from the “top” or “bottom” of the browser, but should be set to start “left”. This latter appears necessary where you have set Xara’s ‘Scale-to-Fit-Width’ option (available from v16.3 onwards). A video fill browser setup using a page placeholder only works where ‘Scale-to-Fit is turned off (that is unless you have additional code to compensate for its behaviour). Using HTML body HTML/CSS simplifies the approach. Any part of the video can be masked by placing content on the page; opacity can be adjusted to reveal the background video as required.

Fill Page Width Video Header

Headline Message