responsive iframe auf allen Geräten

Hi zusammen,

ich bin ein völliger WP Anfänger und bastel mir eine Seite.
Ich bin gezwungen einen Audioplayer über ein iframe einzubinden (GEMA).
Die Seite mit dem Player sowie die Seite auf der der Player eingebunden werden soll gehören beide mir, ich kann also auf beiden Seiten Code einfügen.

Ich habe schon diverse Plugins versucht und auch hier im Forum verschiedene Ansätze verfolgt aber noch kein zufriedenstellendes Ergebnis hinbekommen.
Der eingebundene Player sieht auf meine Mac im Browser gut aus, auf meinem iPhone gehts gar nicht.

Ich habe folgendes eingebunden.

.content {    width: 100%;
    margin: 0px auto;
}

.embed-container {
    height: 0;
    width: 100%;
    padding-bottom: 56.25%;
    overflow: hidden;
    position: relative;
}
            
.embed-container iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

und

<div class="content"> <div class="embed-container"> <iframe src="http://www.loungeband.demotitel.de" width="100%" height="800" frameborder="0" marginwidth="4" marginheight="0" scrolling="auto"></iframe> </div> </div>

Hat vielleicht jemand eine Lösung oder einen anderen Lösungsansatz?
Vielen Dank schon im voraus

LG

Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]