Weebly Video Header Widget Tutorial

20/1/2016

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 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.


<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.

Request More Customisation Features

12 Comments

Jana link

25/2/2016 06:12:47 am

Hi together, I've followed your instructions, but unfortunately it doesn't work on our site. When I publish the site, the content below the emded codes doesn't appear. Does your tutorial only work with one special template? I use the template named "Aroma". Or what could be the problem?

Rey link

15/4/2016 10:31:49 am

Hi Jana. I've tested this myself and found that it does work as intended. It should be able to work with any template as it is not template-dependent. I tried to find another solution should you continue to try and still can't get it to work on your end. And this one works fine too.

http://videoyoutube1.weebly.com/work.html

With the original codes provided you have to play around with spacing (vh) a bit to get it right and use "space" elements from the weebly builder to help you organize content. If you reply I can show you an example I made using their exact code to show you it does function properly.

It all depends on whichever method of going about doing this you prefer.

Mario link

6/7/2016 06:42:17 pm

hello, i want add video like you, i was configured some page in weebly but nothing like, can you help me please , i need almost the same page like you for home page. have you create a new template ?

Thank

Sasha

3/6/2016 07:02:22 pm

Hi there, the code is working pretty well for me but how can I use this code to add youtube video with autoplay and loop that would be pretty awesome ;) can you help me please.

Rey

8/7/2016 02:53:01 pm

Sorry for the late reply. Hadn't been on in a while. I posted it for you. Reminder: It doesn't have to be at the top, you can place it anywhere you want. :). I added the code in other comments

8/7/2016 02:46:51 pm

For Mario:

<div class="video-background">
<div class="video-foreground">
<iframe src="https://www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ&start=0" allowfullscreen></iframe>
</div>
</div>
<div id="vidtop-content"></div>

And the CSS:
.video-background {
background: #000;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -99;
}
.video-foreground,
.video-background iframe {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
pointer-events: none;
}
#vidtop-content {
top: 0;
}

.vid-info {

position: absolute;
top: 50;
right: 0;
width: 33%;
background: rgba(0,0,0,0.3);
color: #fff;
padding: 1rem;
font-family: Avenir, Helvetica, sans-serif;
box-sizing: border-box;
display:block;
}
div.vid-info {

display:block;
}

@media (min-aspect-ratio: 16/9) {
.video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
.video-foreground { width: 300%; left: -100%; }
}

Replace the link only. Leave the rest of the code intact in the URL link of the video.

8/7/2016 02:49:03 pm

Copy the full HTML - NO HEADER code of a weebly theme. Then, place the video's html markup between header-wrap and main-wrap, main wrapper, or main, etc. Then add your content on top as you wish.

Sanique Prospere link

21/7/2016 10:26:50 pm

how do i put in the urls? mine are not working :(

1/8/2016 11:05:59 am

If you mean the theme you are using now do this:

<div class="fs-vid-background">
<video muted="" loop="">
<source src="video/video2.webm" type="video/webm">
<source src="video/video2.mp4" type="video/mp4">
<source src="video/video2.ogv" type="video/ogg">
</video>
</div>

Where it says video/video.mp4, replace with files/theme/

<div class="fs-vid-background">
<video muted="" loop="">
<source src="files/theme/yourvid.webm" type="video/webm">
<source src="files/theme/yourvid.mp4" type="video/mp4">
<source src="files/theme/yourvid.ogv" type="video/ogg">
</video>
</div>

John Lloyd-Hughes

27/8/2016 02:22:06 am

Hi

Wondered if you could help. I am creating a Weebly site for my sister who lost her job and would like to have a large full width video on the home page.
I can copy your 2 x html code as follows:

<video autoplay poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" loop>

<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>

and

<div style="min-width: 100%;
min-height: 100%; height:25vh"> </div>

But I am not sure how or where to add the link to the video I want to use.

This is the video I would like to use: https://s3-us-west-2.amazonaws.com/coverr/mp4/Green.mp4

If you could clearly indicate how I insert the above link in to your code that would be brill for me and my sister !

Thank you
John

Jay Taylor link

8/9/2016 07:24:11 pm

Thank you! It works great!
http://www.caneycreekstudio.com/motion-backgrounds.html

But I could not get it to stop looping after one play. Do I simply remove the word LOOP from the first line of the code?

8/9/2016 07:25:02 pm

Weebly Video Header Widget Tutorial

Leave a Reply.

Widgets4u news

Categories

Weebly Expert Today

Weebly Video He﻿ader Widget Tutorial

Leave a Reply.

Categories

Weebly Expert Today

Weebly Video Header Widget Tutorial