1I'm 99% sure that this pattern is against ToS, if you use Stream to encode then you need it to deliver too
1?pings
SPlease do not ping community members for non-moderation reasons. Doing so will not solve your issue faster and will make people less likely to want to help you.
SI observe this from ToS "Customers can serve video and other large files using the CDN so long as that content is hosted by a Cloudflare service like Stream, Images, or R2." . Also I noticed that streams have an api for downloading content. This makes me think about using it as a transcoder service.
1I can't find any exact docs/tos reference to support what I'm saying, but I swear I remember reading something from CF that using Stream basically as a transcode/download service only is not allowed. But I personally use the service in a similar way, I guess your mileage may vary
HSubject: How to force Cloudflare Stream Iframe to fill container (Object-fit: cover) without losing quality?
Body: Hi everyone,
I'm building a mobile video feed (TikTok style) using Cloudflare Stream embedded via iframe. My container is responsive (100vw / 100vh), but I'm struggling with two main issues:
Aspect Ratio & Letterboxing: Even with fit=cover in the URL and object-fit: cover in my CSS, the video often shows black bars (letterboxing) or refuses to fill the entire height of the viewport on different mobile devices.
Quality Degradation: When I try to force the iframe to stretch using transform: scale() or by setting large dimensions, Cloudflare's adaptive bitrate seems to downscale the resolution, resulting in a blurry video.
Current Code:
HTML
<div class="video-container" style="width: 100vw; height: 100vh; overflow: hidden; position: relative;">
<iframe
src="https://customer-ID.cloudflarestream.com/VIDEO_ID/iframe?fit=cover&preload=true"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;"
allow="autoplay; encrypted-media;"
allowfullscreen>
</iframe>
</div>
What I've tried:
Adding &stretch=true and &fit=cover to the iframe URL.
Using object-fit: cover on the iframe and the container.
Attempting to use the Cloudflare Stream SDK (<stream> tag), but had issues with initialization in a dynamic AJAX feed.
Question: Is there a reliable way to make the Cloudflare Stream player fill the entire screen (cropping the sides if necessary) while forcing it to maintain high resolution? Is there a specific CSS trick or SDK configuration I'm missing to achieve a true "Vertical Fullscreen" effect?
Thanks for the help!
Body: Hi everyone,
I'm building a mobile video feed (TikTok style) using Cloudflare Stream embedded via iframe. My container is responsive (100vw / 100vh), but I'm struggling with two main issues:
Aspect Ratio & Letterboxing: Even with fit=cover in the URL and object-fit: cover in my CSS, the video often shows black bars (letterboxing) or refuses to fill the entire height of the viewport on different mobile devices.
Quality Degradation: When I try to force the iframe to stretch using transform: scale() or by setting large dimensions, Cloudflare's adaptive bitrate seems to downscale the resolution, resulting in a blurry video.
Current Code:
HTML
<div class="video-container" style="width: 100vw; height: 100vh; overflow: hidden; position: relative;">
<iframe
src="https://customer-ID.cloudflarestream.com/VIDEO_ID/iframe?fit=cover&preload=true"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;"
allow="autoplay; encrypted-media;"
allowfullscreen>
</iframe>
</div>
What I've tried:
Adding &stretch=true and &fit=cover to the iframe URL.
Using object-fit: cover on the iframe and the container.
Attempting to use the Cloudflare Stream SDK (<stream> tag), but had issues with initialization in a dynamic AJAX feed.
Question: Is there a reliable way to make the Cloudflare Stream player fill the entire screen (cropping the sides if necessary) while forcing it to maintain high resolution? Is there a specific CSS trick or SDK configuration I'm missing to achieve a true "Vertical Fullscreen" effect?
Thanks for the help!