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

Lay Theme Forum

Fixed Height for Html5 videos

Before you post:

When you post:

Online Users