Fixed Height for Html5 videos

mariusjopen

Dear @vj
Can you post a link to your website?
We will then have a look and inspect that!
Many wishes!
Marius

vj

This post is deleted!

vj

Hi Marius,
I hope that you are good!
Any idea of how can I solve this problem?
Thanks for your help!

mariusjopen

Dear @vj
this is not the solutin but gives you an idea of how to play around:

video {
    height: 100vh !important;
    object-fit: cover;
    width: 100vw;
}

Bst!
Marius

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 :)

Lay Theme Forum

Fixed Height for Html5 videos

Before you post:

When you post:

Online Users