Fixed Height for Html5 videos

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

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