Here is a quick and easy way to implement a video header or banner for your weebly site.
Step 1: Add 2 embed HTML elements at the top of your page
Step 1: Add 2 embed HTML elements at the top of your page
Step 2: Paste the following code into the first Embed element. Change the video URLs to suit
<video autoplay poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" loop>
<!-- WCAG general accessibility recommendation is that media such as background video play through only once. Loop turned on for the purposes of illustration; if removed, the end of the video will fade in the same way created by pressing the "Pause" button -->
<source src="//demosthenes.info/assets/videos/polina.webm" type="video/webm">
<source src="//demosthenes.info/assets/videos/polina.mp4" type="video/mp4">
</video>
<style>
video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 0;
transform: translateX(-50%) translateY(-50%);
background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;
background-size: cover;
transition: 1s opacity;
-webkit-filter: brightness(40%);
}
</style>
Step 3: Paste the following code in the second Embed block. The value "25vh" can be changed depending on where you want your content to follow.
If you would like your content to follow after the video, set this to "100vh". If you would like your content in the middle of the video, leave it as "25vh". You can edit this value to suit.
If you would like your content to follow after the video, set this to "100vh". If you would like your content in the middle of the video, leave it as "25vh". You can edit this value to suit.
<div style="min-width: 100%;
min-height: 100%; height:25vh"> </div>
Step 4: You can add in Spacer elements where needed to make the structure flow correct
If you would like further customisation such as enabling drag and drop features or any other specific extension of this widget, please contact us.
RSS Feed