Cloudflare Stream iframe not scaling properly to full-screen on mobile devices

Developers Stream
1

What is the name of the domain?

Type

Video

What is the error number?

No specific error number, but the iframe does not behave as expected on mobile.

What is the error message?

o error message, but the video does not scale to full-screen properly on mobile devices.

What is the issue you’re encountering

I’m using Cloudflare Stream to embed videos on my website (if relevant, I am using Wordpress and Elementor). The iframe works perfectly on desktop, but on mobile devices, it does not scale properly to fit the full screen. Instead, the video appears cropped or does not expand fully, leaving extra space around it. I have tried various CSS adjustments, including setting width: 100vw; height: 100vh; and ensuring the parent container is flexible, but the issue persists. This only happens on mobile—on desktop, the video fills the screen as expected. I am looking for a way to ensure the Cloudflare Stream player fully adapts to mobile screen sizes.

What steps have you taken to resolve the issue?

Used the standard responsive embed code provided by Cloudflare Stream.
Adjusted the iframe container with width: 100vw; height: 100vh; to force full-screen scaling.
Tested position: absolute; top: 0; left: 0; inside a relative container.
Tried disabling Cloudflare Stream’s default responsive=true setting.
Tested on multiple devices and browsers, but the issue remains on mobile.

What are the steps to reproduce the issue?

Embed a Cloudflare Stream iframe inside a container on a webpage.
Set the iframe to cover the full viewport (100vw x 100vh).
Open the page on a mobile device.
Notice that the video does not expand properly to full-screen, appearing cropped or leaving extra margins.

2

Could you share the URL where the Stream iFrame is implemented? :thinking:

The copy-pasted code from the Cloudflare Docs might not be the best, despite it does work.

Did you set no margin and no padding on Elementor container?

3

Hi and thank you for your response!

Here is the test page where the Cloudflare Stream iframe is implemented (it’s a test for now, I had to use other means in the meantime):
Test page - Havenjapan](Test page - Havenjapan

So, just to recapitulate for you:

  • The iframe works fine on desktop, but on mobile, the video does not scale properly to fill the screen.
  • I’ve ensured that the Elementor container has no margin and no padding, I can share screenshots if you need?

What I’ve Tried:

  1. Used the standard Cloudflare Stream embed code, here is exactly what I used:

I know it has the “padding-top: 56.25%;”>" that force everything to a certain ratio, but I’ve tried everything that I know to try and make it work, and without success. I’m not super advanced, I apologise for that, I did try for a while before deciding on this post.

I tried:

  • Disabled Cloudflare’s built-in responsiveness (responsive=false) to manually control it via CSS.
  • Set the container and iframe styles to:
    position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
  • Tested different mobile devices and browsers, but the problem remains.
  • Used the standard Cloudflare Stream embed code with responsive=true.

Thanks in advance for any insights or ideas you might have.