Fixed Height for Html5 videos

vj

@mariusjopen Thanks Marius. Here you can see what happens when I add a video inside a carousel: http://www.virgilijubero.com/danone

The video autoplays with no sound and it's not possible to play/pause on clicking. Instead, I would like to see the placeholder with the play button and that when you click the video starts with sound on. This is how I set it up: Captura de pantalla 2020-05-28 a las 19.04.36.png

mariusjopen

Dear @vj
ok. This looks weird.
We will have a look.
Best!
Marius

arminunruh

:D

better insert a normal html5 video, don't use a carousel for this

then give it a html class and edit the css to fit your needs

vj

@arminunruh thanks! I tried to do this but the css for the html5 video didn't work, it didn't fixed the Height as I wanted. That's why I put the video inside the carousel. Any idea of what can I do? Thanks!

vj

@mariusjopen hello Marius! Is there something I can do to fix this problem? I eventually want to have photos and videos in a carousel, so I think that @arminunruh answer won't be the solution :( Many thanks

mariusjopen

Dear @vj
we will have another look!
Best!
Marius

arminunruh

I mean in the end its about applying CSS in the right way for your case

@mariusjopen can you try and see which CSS he used and see if you can improve his CSS

arminunruh

anyway, i added this to my list, would be great to be able to make elements have a certain fixed height one day. however, this is kind of low priority right now

if you'd like us to take another look at your css, please create a new page, insert a html5 video and use a html class on it that has your css applied and post the link please <3

vj

This post is deleted!

mariusjopen

Dear @vj

have a look here:

.html5video .html5-video-placeholder-image.w100 img {
    width: 100%;
    height: auto;
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    height: 100vh;
    object-fit: cover;
}
.html5video .ph {
    position: relative;
    padding-bottom: 100vh !important;
}

Best!

Marius

vj

Thanks, it works!

CyberSlayers

Nice!
Thank you for letting us know!
Best and have a wonderful day!

Audrey

vj

This post is deleted!

vj

I've achieved the desired effect by placing the video inside a carousel, but now the issue I see is that the standard video controls aren't appearing. Is there a way to make them show up?

arminunruh

<script>
window.laytheme.on('newpageshown', function(){
jQuery('.lay-carousel-wrap video').each(function(){
jQuery(this).attr('controls', 'true');
})
})
</script>

if you put that in <head> content in lay options -> custom html & css
does that work?

or instead of using that script, maybe use a normal html5 video element and this css?:

.html5video .ph {
    position: relative;
    padding-bottom: calc(101vh - 74px)!important;
}

vj

It works! Thanks :)

arminunruh

when i was on your website i saw a cool thing about putting your video in a carousel

on any aspect ratio / screen dimensions, the full video will always show as it will always be contained in the browser width and height

if you use the html5 video solution i think this wont be the case

maybe you can add:

.html5video video {
width: 100%!important;
height: 100%!important;
object-fit: contain!important;
}

then maybe it will work like this too if you use a html5 video element instead of only a carousel

and for the carousel i noticed that the unmute button loses its position when you resize the window. if you update the carousel addon now, this should be fixed

vj

Many thanks!

Lay Theme Forum

Fixed Height for Html5 videos

Before you post:

When you post:

Online Users