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!

Is there any way to hide the video’s player button?
Previously this could be done by hiding the .big-play-toggle class, but now that’s not possible anymore.
Not passing the controls attribute hides it, but also hides the rest of the controls, which are needed.

Hi @zaid

Is there a way to add custom click events? Before we were able to set an event that when the user clicked on the video it would go through to a URL but now when I add an event click and click on the video it does not register the event.

@edward.dalbon Thanks for writing in. Customizations within the iframe are not yet supported, but keep an eye out for updates!

@chris.almeida-symons Thanks for writing in.
Depending on your requirements, this can likely be achieved with an overlay over the video using position: absolute;.

We’ve finished rolling out this change to all players!

Still working on addressing few little issues brought up on this thread (like @james3’s issue with contentWindow missing). Will keep this thread posted.

Hello,
We’re running into some serious issues with the player that opens in a popup after this update - actually, it doesn’t load at all.

In console we get this:
Could not parse content for https://embed.videodelivery.net/embed/iframe-player.49d76fd7.js.map: Unexpected token < in JSON at position 0

and

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://embed.videodelivery.net') does not match the recipient window's origin ('xxxx')

Can you please share a link to your page so we can investigate?

Hey, unfortunately the codepen you linked to will not solve my issue. We are using object fit on many videos that are not fullwidth (all but 1) and the above solution does not work for that.

Looking at the “new” stream code it seems you have simply wrapped the old stream component in the new one. Is there no way to simply use the old stream??

Outside of that perhaps allow some options such as object-fit to passed as url parameters, currently looking into alternate solutions as we cannot continue with the new stream.

Thanks!

Hey, I work on the Stream product at Cloudflare. I am really sorry our latest player release broke the functionality on your site. The Stream Player did not have official support for custom CSS/HTML modifications since we cannot account for every CSS customization a user might make to the player’s CSS. We will make this clearer going forward.

Customizations and features that we did have official support for (such as the events supported by the previous player) continue to be supported in our new release. There were no breaking changes for any feature officially supported by the Stream Player.

I would love to chat more about your use case and what we can do to help you in the immediate term and longterm with officially supporting your particular use case. Could you email me at my_name at cloudflare.com?

Hi,
We have also been receiving the error that reads ::Could not parse content for https://embed.videodelivery.net/embed/iframe-player.49d76fd7.js.map: Unexpected token < in JSON at position 0

We found this out when the video play back stopped.
Please could you give us a resolution to this problem?

Thanks

This change broke our content security policies - which we take very seriously as this is the only cross domain content we allow. Now that everything is in a iframe anyone else that runs into the same issue will need to add frame-src https://embed.videodelivery.net; To their Content-Security-Policy: header.