- This topic has 15 replies, 2 voices, and was last updated 3 years, 4 months ago by David.
-
AuthorPosts
-
December 4, 2020 at 5:12 am #1567081Dan 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!
December 4, 2020 at 5:22 am #1567089Dan KingI also am adding images on top of the video.. which doesn’t look like an option for the HTML block?
Sorry! Thanks
December 4, 2020 at 10:20 am #1567656DavidStaffCustomer SupportHi 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; }
December 4, 2020 at 10:51 am #1567695Dan KingHey 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
December 4, 2020 at 1:53 pm #1567865DavidStaffCustomer SupportYou HTML Video element opening tag is:
<video class="video"
Change that to:
<video class="video video-bg"
December 7, 2020 at 9:24 am #1570616Dan KingOh 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?
December 7, 2020 at 9:33 am #1570629Dan Kingwould 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
December 7, 2020 at 12:04 pm #1570760DavidStaffCustomer SupportIn 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.
December 8, 2020 at 10:13 am #1571911Dan KingOH 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
December 8, 2020 at 2:39 pm #1572109DavidStaffCustomer SupportDo 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.December 9, 2020 at 10:31 am #1573257Dan KingHi 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
December 10, 2020 at 3:25 am #1574092DavidStaffCustomer SupportTry this:
<video class="video video-bg" autoplay loop muted playsinline width="100%" autobuffer="true">
The
playsinline
attribute looks to be the missing piece.December 11, 2020 at 5:38 am #1575920Dan KingIt 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/
December 11, 2020 at 6:32 am #1576014DavidStaffCustomer SupportDid 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 ?
December 11, 2020 at 6:38 am #1576024Dan KingGosh 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!
-
AuthorPosts
- You must be logged in to reply to this topic.