Cover Video - CDN

I also am adding images on top of the video.. which doesn't look like an option for the HTML block?

Sorry! Thanks

Hi there,

the core Cover Block video background doesn't support external URLs. You would have to manually create those using HTML. You could try this:

1. Add a Container Block - and give it an additional CSS Class of has-video-bg. This container needs to be set to Full Width and Full Width inner with no padding.

2. Inside the Container add your HTML Video element with a class of <video classs="video-bg">

3. After the Video HTML add another container block with a class of: video-container-content
This container you can add whatever content you require.

Then add this CSS:

.has-video-bg {
    position: relative;
}
.video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    height: 100%;
    z-index: 0;
    object-fit: cover;
}
.video-container-content {
    position: relative;
}

Hey David,

Thanks for coming back to me so quickly!

Okay so I get most of it ;-)

2. Inside the Container add your HTML Video element with a class of <video classs="video-bg">

When I add a HTML block there's nowhere i can see to add the class? Normally theres' advanced (pics below)

For number 3... how do you add CSS to a container?

3. After the Video HTML add another container block with a class of: video-container-content
This container you can add whatever content you require.

Then add this CSS...

PS the CDN works wow the pages i'm building load in .4 sec ;-)

Thanks have a great weekend!

Dan

container with CSS Class has-video-bg

https://drive.google.com/file/d/1WmzMpBcNZY8EJvMW8SRZSD7RBZ3kCI5R/view?usp=sharing

Container add your HTML Video element

https://drive.google.com/file/d/10LLYQQ3_uqgqHeLILkVlnin_Rr84d0Ei/view?usp=sharing

Container for CSS

https://drive.google.com/file/d/13kLQHvNnBoremkLrxw-z3p8KLU0tANBG/view?usp=sharing

You HTML Video element opening tag is:

<video class="video"

Change that to:

<video class="video video-bg"

Oh wow... with a few page tweaks that has made it full screen... (pic attached) :-))) thank you!

1. Can it autoplay? I assume i insert the 'autoplay' somewhere in here:
(i don't need the video controls... it's just supposed to loop like a gif)

<video class="video video-bg" poster="/wp-content/uploads/2020/12/M1-Level-3-Thumbnail-1.png" width="100%" autobuffer="true" controls="true" >
<source src="https://learnclub.b-cdn.net/CW1%20-%20NEW.mp4" type="video/mp4">
</video>

2. Where do I put this code? I created a container with the class: video-container-content (pic attached) but where does the code go?

.has-video-bg {
position: relative;
}
.video-bg {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 100%;
height: 100%;
z-index: 0;
object-fit: cover;
}
.video-container-content {
position: relative;
}

Thank you sooooo much!! Wow this would otherwise be a major headache! Having just set up the CDN lol

https://drive.google.com/file/d/1ReAO73A4sE-4SpfsIbl7I1ohWJ3BNXYO/view?usp=sharing

https://drive.google.com/file/d/1Nf8ZRJ3mVEnzXW3NkFAy9V8UdWnX3CPf/view?usp=sharing

Thanks in advance! Dan King

PS will it work on mobile?

would it work adding this to the css to force fit it to a mobile screen?

object-fit:fill

i found this link referring to it.. https://stackoverflow.com/questions/43475369/making-video-full-screen-on-mobile-screen-also

Thanks Dan

In your <video> HTML you can include these attributes:

autoplay loop muted

So you opening video tag will look something like this:

<video class="video video-bg" autoplay loop muted >

The muted will ensure auto play on mobile devices.

That CSS can be added to your Customizer > Additional CSS.

Once you have it setup - share a link to where i can see it and ill have a look at the mobile requirements.

OH WOW IT WORKED!

https://learnclub.wpmudev.host/test-33/

MIND BLOWN!

This is the video code i'm using:

<video class="video video-bg" autoplay="true" loop="true" muted="true" width="100%" autobuffer="true">
<source src="https://learnclub.b-cdn.net/V%20-%20M%20-%204%20-%20L%20-%201.mp4" type="video/mp4">
</video>

I removed "controls" because they were popping up on mobile... but it's not playing on mobile now?

Otherwise wow!

Thank you so much!!! You're a super star! :-))))))))

Dan

Do you have a link to the page where i can see it not working on mobile?
Have to make sure that the Mobile device is not in Low Power mode as that will disable any autoplays.

Hi David

Neither of these play on my phone...

https://learnclub.wpmudev.host/test-33/

https://learnclub.wpmudev.host/test-3-2/

They're the 2 test pages i built... they work on my mac ;-)

Not on low power mode ;-)

The autoplay for the banner is working on mobile:

https://learnclub.wpmudev.host/mission-4/level-2-c

Thanks again for all your help :-)))

Dan King

Try this:

<video class="video video-bg" autoplay loop muted playsinline width="100%" autobuffer="true">

The playsinline attribute looks to be the missing piece.

It worked! WOW!

Okay so we're 99.9999999% of the way there (I know... like ball of wool :-)) )

Is there anyway to increase the size of the LEVEL, COMPLETE and NEXT LEVEL images on mobile?

I tried to reduce the padding (and make negative margins but that didn't do anything?)

this is what it says it should look like :-)

https://drive.google.com/file/d/1Nf8ZRJ3mVEnzXW3NkFAy9V8UdWnX3CPf/view?usp=sharing

reality :-(

https://drive.google.com/file/d/1Nf8ZRJ3mVEnzXW3NkFAy9V8UdWnX3CPf/view?usp=sharing

Thank you so much for your help...

Dan King :-)

This page: https://learnclub.wpmudev.host/mission-1/level-1-c/

Did you resolve that last issue ? As when i view the site they are occupying the fill width of the container.... maybe the browser cache needs clearing ?

Gosh yes you're right i tried another mobile and it's full screen!

I can't believe we did it... :-)) well you did lol!

Dan

PS.. I was going to leave it until next week... :-( but can I open a new ticket once this is closed regarding horizontal scroll? https://codeburst.io/how-to-create-horizontal-scrolling-containers-d8069651e9c6

Thank you again you've been ace!