Fixed Height for Html5 videos

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