Responsive iFrame

Illdy
1

I have three sites that use the same iFrame code (a HTML5 shoutcast player).
Two use the Illdy theme, the third does not.

The non-Illdy theme works fine.

The two Illdy sites, the iFrame is stretched to the entire width rather than the size specified in the iframe code. In addition, when the window is wide, the height accomadates the iFrame. As the window width is decreased, at a certain point, Illdy reduces the height, cropping the iFrame, and content is blocked. In this case, the player controls.

Site that works for a reference:
http://www.woofswoofs.com/woofdreams-radio/

two Illdy sites:

All three sites have the same code (other than pic url)

iFrame code:
<p style=“text-align: center;”><iframe src=“http://html5radio.svnlabs.com/html5shoutcast.php?radiolink=http://87.117.201.159:8390/&radiotype=shoutcast&bcolor=000000&image=http://www.woofswoofs.com/wp-content/uploads/2015/01/WooFDreams-Plug-In-Graphic11-01.png&facebook=http://www.facebook.com/woofdriver&twitter=http://twitter.com/woofdriver&title=WooFDreams&artist=” width=“367” height=“227” frameborder=“0” marginwidth=“0” marginheight=“0” scrolling=“no”></iframe></p>

2

Hi,

Please add this Custom CSS in Appearance -> Customize -> Additional CSS,

.blog-post-entry iframe {
    width: 380px !important;
}

Adjust the width according to your needs.

Let us know,

Thanks,
laranz.

3

Thank you for the quick response.

That almost worked. It fixed the width issue.

But the iframe height still reduced when the window width was reduced, this still resulted in a cropped off bottom of the iframe. Following your format, I added a height line and it works great now.

4

Hello there,

I am glad the solution worked for you.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,
Support