[Support request] Cover Video – CDN

[Dan King]

Hello,

I’m going to be using a lot of videos and I’m concerned about the speed of the site… so I am investigating CDN

I’m using a CDN video here: https://learnclub.wpmudev.host/mission-1/c-level-1-mission-1/

with this code:

<video width=”100%” controls>
<source src=”https://learnclub.b-cdn.net/CW7%20(2).mp4″ type=”video/mp4″>
</video>

However…

I’m using Cover Videos here: https://learnclub.wpmudev.host/mission-1/level-1-c/

These videos are being served from my Media Library… and I need them to be served via CDN…

Can i replicate the cover video functionality – fullscreen, autoplay and looping using the <video> </video> code (CDN)?

Thank you so much!

[Dan King]

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

Sorry! Thanks

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dan King]

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

[David]

You HTML Video element opening tag is:

<video class="video"

Change that to:

<video class="video video-bg"

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dan King]

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&#8243; 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?

[Dan King]

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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dan King]

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&#8243; 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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dan King]

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

[David]

Try this:

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

The playsinline attribute looks to be the missing piece.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dan King]

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/

[David]

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 ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dan King]

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!

[Author]

Posts