Video not expending into 100vh on mobile devices - On Website

Developers Stream
1

What is the name of the domain?

https://onzeretreats.com/

Type

Video

What is the error number?

1

What is the error message?

Video not expending into 100vh on mobile devices - On Website

What is the issue you’re encountering

I want to make the video to expend 100vh on mobile and desktop, 100vh is working on desktop but not for mobile devices!

What steps have you taken to resolve the issue?

I have done of css tweaks to do it but it is not changing. i even tried to achieve it with javascript but it did not work either.

The embed code:

2

May I ask how you implement Stream video into the HTML?
Are you using Stream Player, iframe, or some kind of your own implementation including video element and div tags for responsive?

I cannot see it, neither on your shared domain name to test :frowning:

Try using 100dvh instead :thinking:

1 Like
3

this did not help either,

here is my embed code:

4 
<div style="position: relative; padding-top: 56.25%; height: 100lvh;">
  <iframe
    src="https://customer-8c6azdb3y0rra3lx.cloudflarestream.com/ed3a3edec4795ca61e93059da5b01618/iframe?preload=true&loop=true&autoplay=true&poster=https%3A%2F%2Fcustomer-8c6azdb3y0rra3lx.cloudflarestream.com%2Fed3a3edec4795ca61e93059da5b01618%2Fthumbnails%2Fthumbnail.jpg%3Ftime%3D%26height%3D600&controls=false"
    style="border: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%;"
    allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
    allowfullscreen="true"
  ></iframe>
</div>
5

What did you tried already to change in your code?

You have 100lvh not 100dvh.
You also have position and padding-top of outside div, make height: 100dvh on iframe only, remove outside div and test.

This is not a Cloudflare issue so far I am afraid, rather you’d have to find a solution for this possibly out of those forums.