BANNER VIDEO DEMONSTRATION

This is an example of a banner video 1920px(w) x 824px(h). The website desktop variant is set to 1280px wide with Export Scale-to-fit-Width also at 1280px. The mobile variant is set to 640px wide with the mid-point between the two variants being 960px. In this example the website has initially been exported to a local directory and the required video copied and pasted into folder “index _htm_files”. This overcame an issue with a particular hosting company that did not provide c-panel access to allow a video to be separately uploaded to the host site and called from that location - the video would usually be exported via FTP to the host site. The video will stretch the full width of the browser in the desktop variant using the following code that is placed the Page HTML (code head). The original Talk Graphics video has been replaced. <style> #myVideo { display: none; position: fixed; “fixed” can be changed to “absolute” for the video to scroll up and back - see Note * left: 0; top: 0; min-width: 100%; height:auto; margin-left: 50vw; transform: translate(-50%); } @media screen and (min-width: 960px) { #myVideo { display: block; z-index: -1; } </style> <video autoplay muted playsinline loop id="myVideo"><source src="https://initiostar.co.uk/demo/banner-vid/index_htm_files/1920-824.mp4" type="video/mp4"></video> The above code ensures the video remains centred in the desktop variant, but the @media rules are used to ensure the video in this format does not display in the mobile variant. The mobile variant has a simple copy of the same video rendered through a standard video tag which ensures the video is correctly proportioned in that variant. Note*: where the video is “absolute” it will scroll upwards and downwards in line with the content on the page. Another approach is to place an opaque rectangle over a fixed position video: > https://initiostar.co.uk/demo/Video/banner.htm. This offers the opportunity to create a parallax effect with content flowing over the background video.