A different way to do this that might work for you? I inserted a coloured rectangle 1920px x 1080px for the closing frames of my intro video to match the background colour of the website e.g https://initiostar.co.uk. In my case the headline message and menu have a delayed fade-in animation over the video. The intro video is on the index page, plays once and the menu takes you to pages 1, 2 etc. Works on the desktop and mobile variant and uses export option scale-to-fit-width.
HTML Code:
<! --1920 x 1080 video set to fill the browser window-->
<style>
* { box-sizing: border-box;}
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
</style>
<video autoplay muted id="myVideo">
<source src="Intro.mp4" type="video/mp4">
</video>
Another way if you have a headline banner video (say 1920px x 400px) is to place the video at the top of the page and have the menu bar scroll to stick-at-top whereby the video scrolls out of view. If the video has sound you may need to code a pause video when it scrolls out of site.
Bookmarks