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!

Lay Theme Forum

Fixed Height for Html5 videos

Before you post:

When you post:

Online Users