Iframe api doesn't play since some days

Highlight-Concerts · 2023-08-03

Since some days my iframe player is not working.

I embedded a pause and play functionality.

But since some days the play(); function doesn't work on the api.

There's a message 'encrypted media access has been blocked...'.

The play(); and pause(); function doesn't work.

'encrypted-media' is allowed.

It plays only in preview mode!

Can you assist?

florinTAP · 2023-08-09

We got the same issue, can't get the spotify controller to control the iframed song. Anyone from Spotify around to shine some light? Is the EmbedController.play() function still supported?

Trikto · 2023-08-15

Same here, since a few days, EmbedController play controls does nothing at all, tested on several browsers. This is true even if the frame is not in preview mode.

Here is a small adaptation of the tutorial from https://developer.spotify.com/documentation/embeds/tutorials/using-the-iframe-api to reproduce the 'togglePlay' issue :

<html>

<head>
  <style>
    body {
      display: flex;
      gap: 1rem;
    }

    .episodes {
      display: flex;
      flex-direction: column;
    }

    .episode {
      min-width: max-content;
      margin-bottom: .8rem;
      padding: .8rem 1rem;
      border-radius: 10px;
      border: 0;
      background: #191414;
      color: #fff;
      cursor: pointer;
    }

    .episode:hover {
      background: #1Db954;
    }

  </style>
</head>

<body>
  <div class="episodes">
    <button class="episode" data-spotify-id="spotify:episode:7makk4oTQel546B0PZlDM5">
      My Path to Spotify: Women in Engineering
    </button>
    <button class="episode" data-spotify-id="spotify:episode:43cbJh4ccRD7lzM2730YK3">
      What is Backstage?
    </button>
    <button class="episode" data-spotify-id="spotify:episode:6I3ZzCxRhRkNqnQNo8AZPV">
      Introducing Nerd Out@Spotify
    </button>
    <button id="control">
      Toggle Play
    </button>
  </div>

  <div id="embed-iframe"></div>
  <script src="https://open.spotify.com/embed-podcast/iframe-api/v1" async>
  </script>
  <script type="text/javascript">
    window.onSpotifyIframeApiReady = (IFrameAPI) => {
      const element = document.getElementById('embed-iframe');
      const options = {
        width: '100%',
        height: '200',
        uri: 'spotify:episode:7makk4oTQel546B0PZlDM5'
      };
      const callback = (EmbedController) => {
        document.querySelectorAll('.episode').forEach(
          episode => {
            episode.addEventListener('click', () => {
              EmbedController.loadUri(episode.dataset.spotifyId)
            });
          });
        document.getElementById('control').addEventListener('click', () => {
            console.log("Toggle play on EmbedController")
            EmbedController.togglePlay();
          });
      };
      IFrameAPI.createController(element, options, callback);
    };
  </script>
</body>
</html>

Help categories

Account & Payment

Using Spotify

Listen Everywhere