0

I am attempting to show a simple mockup to a potential client of how he could stream media from his own online radio station to a page. The radio station was built using an external site and in Safari rendering the station's share link in an iFrame works perfectly, and plays immediately on page load without the user having to do anything. Here is the pure html code; there's no JS for this page now:

<iframe src="https://lucasdraft.out.airtime.pro/lucasdraft_a" frameborder="0"></iframe>

The CSS:

iframe {
        height: 50px;
        width: 200px;
        float: right;
}

But in Chrome, half the time when I try to load the page the iframe doesn't show up at all and the page loads continuously with the status at bottom left displaying "Waiting for available socket"- again this never happens on Safari. When it does load in Chrome, instead of showing the basic media player from the external source it shows a sort of gray semi-circle with three dots. If I click this gray blob it begins playing, but this is very un-intuitive to a user not to mention ugly. I assume this is a security feature in Chrome but haven't found any reliable way of fixing it. Increasing the size of the iframe does not change anything.

Safari (working as expected): enter image description here

Chrome loading error: enter image description here

Chrome with cache cleared, after loading the iframe:

enter image description here

Thanks and anything helps in fixing this pesky error!

James Hubert
  • 117
  • 2
  • 12

1 Answers1

1

For the Waiting for available socket, a quick google search got me this answer. Chrome hangs after certain amount of data transfered - waiting for available socket It's always a good idea to google something before asking.

For the visual problem. the Url in your Iframe is calling a video. Different browsers use different style for their video player. Chrome just needs a little bit more height. I find that 100px works well.

Mathieu Godin
  • 46
  • 6
  • Thanks Mathieu! I google'd for a day and a half but guess I wasn't using the correct search terms. The height fix worked well for the video player- I had tried quite large iFrames previously but maybe the loading issue kept it from rendering. – James Hubert Jan 31 '20 at 19:40