Angular 4 Embedding SoundCloud Error: Failed to execute 'createPattern' on 'CanvasRenderingContext2D': The canvas width is 0

Question

I tried to embed the soundcloud iframe into my angular 4 component, but I get this Error Code:

Failed to execute 'createPattern' on 'CanvasRenderingContext2D': The canvas width is 0.

The Iframe Code I used was:

<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/324479935&amp;color=%23ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;show_teaser=true"></iframe>

Answer 1

I was seeing the same error running a NextJS (React SSR) app. Was able to prevent it by making sure the iframe was only rendered client-side. Not Angular but hopefully relevant.

const SoundcloudEmbed = ({embedUrl}) => {
  return typeof window === 'undefined' ? null : (
    <iframe
      width="100%"
      height="20"
      frameBorder="no"
      src={embedUrl}
    />
  );
}