Search code examples
javascripthtmliframeexpressionengine

Why does ExpressionEngine seem to remove the src URL from an iframe client-side?

ExpressionEngine seems to be stripping some of the parameters from the source URL of an iframe. This is happening in the browser, not on the server.

When I view the HTML source for the page in question, the iframe source is correct. When I view it in the console, it is not the same as in the HTML source.

The elements console shows:

<iframe frameborder="0" height="166" scrolling="no" src="http://w.soundcloud.com/player/?wmode=transparent" width="100%"></iframe>

The HTML source shows:

<iframe frameborder="0" height="166" scrolling="no" src="http://w.soundcloud.com/player/?url=http%3A//api.soundcloud.com/tracks/112438993&amp;color=ff6600&amp;auto_play=false&amp;show_artwork=true" width="100%"></iframe></div>

If I manually change the source in the browser's elements console, the iframe loads without problem.

I'm imagining there is some javascript that is stripping out the src, but I can't find it. I've searched and searched using Google for someone experiencing the same problem, without success.

The URL in question is: http://rebelnoise.com/articles/album-debut-in-december-for-irish-garage-popsters-dott

This happens for all soundcloud and spotify links.

Spotify Example: http://rebelnoise.com/articles/black-flags-what-the-the-bands-first-album-of-new-material-since-1985

Thanks!

EDIT:

  1. On a hunch, I tried changing the source URL from https:// to just // --- still no luck.

  2. I noticed that the wmode=transparent query string exists in the console, and not in the source... I wondered if a Javascript function was overwriting with the transparent query string, so tried adding that to my full URL as follows:

    <iframe frameborder="0" height="166" scrolling="no" src="//w.soundcloud.com/player/?wmode=transparent&url=//api.soundcloud.com/tracks/112438993&amp;color=ff6600&amp;auto_play=false&amp;show_artwork=true" width="100%"></iframe>
  3. Interesting: I tried saving the entire page and resources to my Desktop, and running it that way-- everything seems to work, so I'm very perplexed.
  4. I am closer to finding the problem-- it appears that wmode=transparent is being added to src all throughout the DOM, so I am wondering if some dummy added bad javascript code in the past to break this site and cause all this problem. Now to find the culprit code!
Solution

  • OK, I feel like a dunce- should have found the pattern sooner.

    There was some code in the footer that added wmode=transparent to all the src files-- it didn't append to any queries that existed, it just replaced them with a new query string.

    I removed that code, and everything is now working.