iframe proportional skalieren

[Sam94]

Hallo liebe Forenmitglieder.

Ich habe ein kleines Problem.
Ich habe mir eine Webseite mittels Wordpress erstellt, und konfiguriere diese dann meinen Ansprüchen entsprechend selbst.

Ich wollte nun ein Soundcloud Player einsetzen, sodass meine Besucher sofort über die Webseite Musik hören können. Soundcloud hat jedoch nun vor kurzem ein neues Player-Layout veröffentlicht, bei welchem der Hintergrund das Cover des Liedes ist.
Nun würde ich ganz gerne den Player so einfügen, dass er immer die gleiche Höhe und Breite hat, sodass der Cover komplett zu sehen ist. Das Widget soll also zu jedem Zeitpunkt eine quadratische Form haben.
Bei der breite ist das ja einfach: width: 100% und fertig aber die Höhe??

Also noch mal kurz und bündig.
iframe Soundcloud Player Widget in der Proportion 1:1 (Höhe = Breite ) skalieren. Breite 100% der Seite.
Wie muss ich das programmieren damit das Widget diese Proportion immer beibehält, egal op Handy Version, oder Desktop PC, 13" Schirm oder 27".

Vielen Dank im Voraus.
LG Sam94

 

[bodo92]

kannst du mal ein bisschen Code Posten ist schwierig so zu Helfen..

 

[Sam94]

[soundcloud url="https://api.soundcloud.com/tracks/73051949" params="auto_play=false&hide_related=false&visual=true" iframe="true" width="100%" height="660" /]

Die Höhe würde ich nun ganz gerne proportional skalieren, sodass das iFrame halt jederzeit eine quadratische Form hat.

 

[Tronjer]

Breite des Viewports in Pixel bestimmen und diesen Wert dem Height-Attribut zuweisen?

Das sollte mit zwei Zeilen JavaScript erledigt sein.

 

[Sam94]

Breite des Viewports in Pixel bestimmen und diesen Wert dem Height-Attribut zuweisen?

Das sollte mit zwei Zeilen JavaScript erledigt sein.

Wie stells du dir das vor? Wenn ich eine feste Breite bestimme bleibt das iframe ja auf dieser Breite. Es skaliert sich also nicht der Seite nach.
Meine Webseite passt sich automatisch dem Gerät an auf dem sie angesehen wird. Bei fester Breite "überlappt" das iframe dann den Container :/

Ich will die Breite als

width: 100%

eingeben, und die Höhe soll dann halt "schauen" wieviele Pixel diese 100% sind und sich dementsprechend skalieren.

 

[Tronjer]

Ja und? Das Äquivalent in Pixeln zu den 100% kann $(element).width() oder $(window).width() sein.

 

[bodo92]

Bin auch JavaScript neuling aber ich würde mal sagen so in der Art müsste es aussehen:

<script type="text/javascript">
    function elementBreite () {
        var breite = document.all.soundcloud.offsetWidth;
        document.all.soundcloud.setAttribute("height", breite, 0);
    }
</script>

Deinem Soundcloud element müsstest du eine id="soundcloud" geben!

Ich hoffe ich erzähle keinen Müll falls doch verbessert mich bitte!

 

[Banana_Jones]

Vielleicht hilft ja auch das weiter: http://www.elmastudio.de/programmie...-videos-fur-responsive-webdesigns-optimieren/