Fill Page Width Video Header
This is demo using Xara v17.0 (tested with 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 onwards). A video fill browser setup using a page placeholder only works where ‘Scale-to-Fit is turned off (assumed that 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 and opacity can be adjusted to reveal the background video as required.
Full Page Width Video Header
This is demo using Xara v17.0 (tested with 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 onwards). A video fill browser setup using a page placeholder only works where ‘Scale-to-Fit is turned off (assumed that 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 and opacity can be adjusted for opacity to reveal the background video as required.