Video embedded from Cloudflare Stream leaves empty gap / margin on bottom of iframe

[Scott_Developer]

This seems to have occurred in the past day and ONLY in Safari Desktop. (It does not appear in Safari Mobile or Firefox or Chrome)

A video embedded from Cloudflare Stream on our site appears to have an empty gap at the bottom. The gap (bottom margin) seems part of the iframe itself provided by Cloudflare Stream, not our own code.

If you resize the window by even 1 pixel the gap disappears and the video looks correct.

Also the gap does not appear to be defined in Cloudflare’s stylesheet.

The example is https://www.forceofnatureclean.com in the block called “Cleaning Reinvented”

[Scott_Developer]

This url demonstrates the issue when you use SAFARI (not another browser):

https://scottsandbox2.wpengine.com/test-video/

That is a barebones test environment with minimal plugins (WooCommerce), no caching.

The problem is that when we embed any Stream video in our site, in the Safari desktop browser the videos show with a large black margin at the bottom. How do we fix?

We embed the Cloudflare iframe the standard way: we view the video in Stream then click > Embed > Click to Copy. So we can’t understand why this renders incorrectly.

Note:

• we do not experience this issue in any other browsers (Google Chrome, Firefox)
• in Safari if you manually drag and change the width of your screen by even 1 px the problem goes away

The issue appears to be coming from within Cloudflare Stream’s iframe. Specifically, it may be relevant that a call that Cloudflare Stream’s SDK makes to init.mp4 seems to fail (see screenshot). This issue doesn’t seem to occur in Google Chrome or Firefox.

This appears to have first occurred on approximately July 25; it was working fine before then.

[Scott_Developer]

In the Safari desktop browser only, all videos that we add from Cloudflare Stream > Embed Code have a black margin on either the side or bottom.

This happens only in Safari Desktop, not Google Chrome.

If you drag-and-resize the window eventually the black margin goes away.

The aspect ratio of the video, which Cloudflare Stream uses to calculate the padding-bottom, looks correct. We don’t have any extra margin built into our videos. The source of the problem seems to be in Cloudflare’s iframe itself

Load this page in Safari to see the issue:
https://scottsandbox2.wpengine.com/cloudfare-video-demo/

[cloonan]

This came up a while ago, does the letterboxColor API address the issue?

Transparent background on Stream player

Is there any update on this?

[Scott_Developer]

Thanks for the reply.

The letterboxColor property lets us change the background color. But the empty margin space persists.

Here (if viewed in Safari) is the problem with letterboxColor=transparent:

How It Works: Electrolyzed Water & Hypochlorous Acid

The video at the top of this page should stretch full width, but it does not due to the empty margin of space on the right.

Also here is a screenshot from Safari

[cloonan]

I was afraid of that. I’ve seen similar reports and that API was the fix, I suspected transparent would work if the video had a border.

This seems a safari issue and there are some workarounds discussed online, safari black border in stream videos - Google Search and if all else fails, reaching out to the safari community for ideas.

---

Next, this is a phone a friend suggestion, let us know if it works for you.
It’s a Safari-specific issue dealing with the CSS object-fit property not functioning as intended. Try adding the following CSS to your site:

.video-js {
    width: 100% !important;
    height: 100% !important;
    object-fit: fill; 
}

This forces video.js (which is what Cloudflare Stream uses) to fill its container, hopefully resolving the black bars issue.

[Scott_Developer]

Very much appreciate your reply.

Unfortunately adding those declarations for .video-js do not seem to have any impact.

Here is a demo page with that CSS added: Cloudflare video demo – Scott's Fake Robot Store

As an aside, I didn’t see the class ‘video-js’ on the page. So I also tried adding it alternately in the iframe element and in the wrapper provided by Cloudflare Stream > Embed Code. Unfortunately still didn’t work.

But I appreciate your reply; it was worth trying

[cloonan]

Were you able to get any assistance from the safari community? It seems like it’s a safari issue that’s been talked about a lot, safari black border video - Google Search

[cloonan]

@Scott_Developer can you share a link to your discussion reporting this safari issue to the safari community? It’s not stream-specific and is well discussed, someone on that forum may have more insight into how to workaround the safari issue.