Major Stream Player changes rolling out Aug 3, 2020

Hello! I work on the Stream team and I wanted to share an upcoming Stream Player change that could impact developers who may be making customizations to the player DOM elements.

You can stop reading if you aren’t making changes to the contents of the element or if you only use the official player API. Similarly, if you use the official React or Angular components, this change will not affect you.

Please keep reading if you use functions such as “document.getElementById()” in or CSS selectors with “stream” to modify the player.

What is changing, when and why?
The update will improve the reliability and the viewing experience using an iframe element to sandbox the player. The change will provide the following benefits:

  • Fewer unintended CSS collisions
  • Better error monitoring
  • Persistent client bandwidth estimation so videos start playing at the optimal resolution
  • Security benefits from Stream Player code executing in a separate context from your website

How can I access a preview build?
We have released an early build of the new player. Please test your website with the preview player:

https://embed.cloudflarestream.com/embed/3f8m.fla9.latest.js

No further action is needed if you see no change in playback behavior.

We plan to start a gradual roll out in two weeks to the existing embed URLs, beginning August 3, 2020.

One of the features/customizations I built will break! Is there a way to support a new player API?
Yes! Please share your use case below and we’ll do our best to show you how to do it with the existing API or figure out how we can support it officially. You can also email me at [email protected].

5 Likes

Hi!

One of our customers reported today that the video player on their website wasn’t working anymore. When we looked into it, this page showed up in the console.
First off, we manage several dozens of websites with a small team so we do not have the capacity to check the console of every website every fortnight. It’s probably smarter to send an e-mail in these kind of cases :slight_smile:

In the original version of the website: https://avfj.nl/home-test/ if you click the play icon, you get an overlay with the video player. But since the update, it only shows the play icon (and the close icon of the overlay). You do get the controls if you click on play though.

The issue seems to be with giving a height attribute to the stream element. In our case this was height=“100%” because otherwise you’d get a vertical scrollbar on smaller screens. I can’t say how this worked with the old version of the player, but in this version the height attribute gets copied to an inline style. If you disable this inline styling in the developer tools, the player is working fine again.
Because the player will give scrollbars without the height, I figured out that if you change the height element to height=“1” the inline CSS gets invalid, but the height works in the html for some reason. You can see this version here: https://avfj.nl/

This hack kind of works for the moment, but not on all sizes, and not when you resize your screen. So it would be great if you could look into this!

@zaid Is there a way we’ll be able to add css to the content within the iframe?

We often use object-fit with video elements and the move to an iframe will break this.

Thanks!

@Spreadit: Thanks for writing in. Just took a look at both versions of your home page.

We recently fixed a bug, unrelated to this thread, where height the attribute alone (no width set) was not being respected. Now that this is fixed, when height is set as a percentage, the stream element no longer has its own implicit height. To create the effect in the easiest way possible, we recommend setting height and width both to 100% on the stream element, and then having its parent be a container that is stretched with regular CSS to whatever size you would like the player to be.

Here’s an example: https://codepen.io/third774/pen/zYqYrPo

If you remove the styles that give container element it’s size, the example would stop working.

height: calc(100vh - 32px * 2);
width: calc(100vw - 32px * 2);

This fix was not part of the rollout described in this thread.

Hey @matt-pilott

We don’t support CSS customizations in the iframe (yet! but stayed tuned in).

I assume you are using object-fit:cover to do a background video on websites with no controls enabled. You can achieve the same output with a solution like this example: https://codepen.io/third774/pen/BaKaKOz. You will need to adjust the aspect ratio in the CSS to fit your video (in the example, it is 16/9).

In this example, we are using position absolute container inside a position relative container to achieve the effect similar to object-fit:cover. The media query is to account for the case where the view is less than 16/9 aspect ratio.

Thanks for being so communicative about the changes! I’ve been testing out https://embed.cloudflarestream.com/embed/3f8m.fla9.latest.js and have been getting some new logError not yet implemented errors. Is this indicative of something I’m doing wrong on my end that is triggering this error? Can I safely ignore this?

Thanks for flagging this @james3! We deployed a fix few moments ago, which should remove the errors.

Thanks for the quick response. I started having another error popping up, only seeing this for one user with Mobile Safari 13.1.2

Error: stream iframe's contentWindow was missing!