Spotify Embed iFrame only plays previews of songs

Question

On my website, I can only seem to play previews of the tracks in the playlist in Chrome and Safari even though I am logged in to Spotify Premium. However, the full tracks can be played in Firefox. Why might this be the case?

Here is my website : www.studify.online

Steps to reproduce: Create an account and login Click on "Music with background noise" Select a playlist and play

Expected behaviour: Widget is able to play full songs as user is logged in.

Actual behaviour: Widget it only able to play previews of songs in Chrome and Safari.

Here is an example url that one of my playlists is using. https://open.spotify.com/embed?uri=spotify:user:1276120884:playlist:3lupJoO6PjahRjP3ehIUpq"

The entire track can be played in any browser when running on localhost, but cannot on heroku server.

My iFrame HTML is as follows:

<iframe *ngIf="playlistSelected" [src]="embedURI" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe><div class="dropdown">

My angular2 component that controls this iFrame is as follows:

onPlaylistSelect(playlist) {
    console.log(playlist);
    this.selected = playlist;
    this.embedURI = "https://open.spotify.com/embed?uri=" + this.selected.uri;
    this.embedURI = this.urlbypassPipe.transform(this.embedURI);
    console.log(this.embedURI);
    this.playlistSelected = true;
  }

This is my urlbyassPipe class:

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer} from '@angular/platform-browser';

@Pipe({
  name: 'urlbypass'
})
export class UrlbypassPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }

}