Fixed Height for Html5 videos

[vj]

Hello!
Is it possible to have the html5 videos with a fixed Height of 100vh -74px in pages where there is only a video in the Grid? I am able to change the Carousel size to Fixed Height: 100vh - 74px, for exemple, but I cannot fix the height directly to a Html5 video. I tried to put the video inside a Carousel but then the audio doesn't sound when you play the video. The Element Grid don't work neither, you cannot play the video, it' doesn't do anything when you click on the play button. Thanks for your help!

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

[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;
}