Responsive 1:1 ratio soundcloud widget in WordPress

The site is http://testsite1.seyoum.net/

Note that the theme I am using is a child theme of twentyfifteen. You can download the theme files here:
https://onedrive.live.com/redir?resid=B9CDD4D34FF06A75!97938&authkey=!AEj9VpYkCRL0SEE&ithint=file%2crar

So far I have managed to make a custom post type called “Soundcloud” and I also have a custom field where I can add a soundcloud link that automatically turns into a widget (thanks to the the integration of oEmbed in wordpress:https://goo.gl/ZlOfxT)

The problem is that the soundcloud widget does not keep a 1:1 aspect ratio on all screen sizes. I want the widget to be responsive but always keep a 1:1 ratio.
enter image description here

How can this be achieved? Preferably I would try to avoid using css. Perhaps some php skills would help here?

I believe the problem is that the oEmbed functionality is adding height and width to the iframe that contains the widget, but I am not sure. At least it looks that way if I inspect the iframe:

enter image description here

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s