Fixed Height for Html5 videos

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