Add "wmode" parameter to src of an iframe with PHP

Question

I have had some problems with the z-index of a FLASH- and an overlaying DIV-element.

I've used this jQuery/Javascript solution, which adds the "wmode=transparent" parameter to the "src" of every (YouTube & Vimeo) iframe, to solve the z-index issues (e.g. flickering, etc).

...

content.find('iframe').each(function() {

   var iframe_source = $(this).attr('src');
   var iframe_wmode = "wmode=transparent";

   if ( iframe_source.indexOf('?') != -1 )
   {
       iframe_source = iframe_source.split('?');
       $(this).attr('src',iframe_source[0]+'?'+iframe_wmode+'&'+iframe_source[1]);
   }
   else
   {
       $(this).attr('src',iframe_source+'?'+iframe_wmode);
   }

});

...

Now I need this solution in PHP, because I still have some z-index-flickering (during the rendering of the DOM) until the jQuery/Javascript solution corrects this problem ( on $(window).load(function(){} ... $(document).ready(function(){} is not possible for me).

My PHP content looks like this for example ...

...

$content = '
foo bar foo bar
<iframe width="1280" height="720" src="http://www.youtube.com/embed/GASFa7rkLtM" frameborder="0" allowfullscreen></iframe>
foo bar foo bar
<iframe width="100" height="100" src="http://www.youtube.com/embed/GASFa7rkLtM?rel=0" frameborder="0" allowfullscreen></iframe>
foo bar foo bar
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/GASFa7rkLtM" frameborder="0" allowfullscreen></iframe>
foo bar foo bar
<iframe src="http://player.vimeo.com/video/57959739?autoplay=1&amp;loop=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
foo bar foo bar';

...

... and shoud look like this after some preg_match/regex-magic ;)

...

$content = '
foo bar foo bar
<iframe width="1280" height="720" src="http://www.youtube.com/embed/GASFa7rkLtM?wmode=transparent" frameborder="0" allowfullscreen></iframe>
foo bar foo bar
<iframe width="100" height="100" src="http://www.youtube.com/embed/GASFa7rkLtM?rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>
foo bar foo bar
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/GASFa7rkLtM?wmode=transparent" frameborder="0" allowfullscreen></iframe>
foo bar foo bar
<iframe src="http://player.vimeo.com/video/57959739?autoplay=1&amp;loop=1&wmode=transparent" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
foo bar foo bar';

...

Many thanks in advance!

Best Mike =)

PS: My idea is to solve the z-index problem via PHP in advance (server-side, not client-side).

PPS: FYI - I get the "content" string with HTML-content/-tags out of a MySQL-DB, and I want to modify these string, instead of modifieng the DOM via jQuery/Javascript.

UPDATE/EDIT:

Buliding on the regex-solution from "One Trick Pony" worked for me. I edited the first and add a second "preg_replace". The first one adds "?wmode=transparent" to the end of each iframe-src and the second replaces the "?" with "&" if exists twice in the url.

$content = preg_replace('#\<iframe(.*?)\ssrc\=\"(.*?)\"(.*?)\>#i',
                        '<iframe$1 src="$2?wmode=transparent"$3>', $content);

$content = preg_replace('#\<iframe(.*?)\ssrc\=\"(.*?)\?(.*?)\?(.*?)\"(.*?)\>#i',
                        '<iframe$1 src="$2?$3&$4"$5>', $content);

Not a beautiful solution, but it worked perfect for my purpose.

Any better suggestions?

Unless that HTML structure stays the same, there's no way you can have reliable replacements with regex here. Use a xml parser, get the `src` attribute of iframes and append your query string to it. — nice ass, Jan 30 '13 at 00:24
Ideally I would need a better solution like this ( http://stackoverflow.com/questions/5414666/php-preg-replace-help-iframe-src ), which takes care of YouTube- and Vimeo-iframes and their existing parameters (e.g. ?rel=0, ?autoplay=1) in the url of the src. Is that possible via regex? — LosMikEos, Jan 30 '13 at 00:31

score 2 · Accepted Answer · answered Jan 30 '13 at 01:48

Using DomDocument:

$dom = new DomDocument();
$dom->loadHtml($content);

foreach($dom->getElementsByTagName('iframe') as $ifr){

  // use parse_url here, change query and rebuild it if you want to be 100% sure 
  $src = rtrim($ifr->getAttribute('src'), '&') . '&wmode=transparent';

  $ifr->setAttribute('src', $src);
}

$content = $dom->saveHtml();

A basic try with regular expressions using greedy matches:

$content = preg_replace('#\<iframe(.*?)\ssrc\=\"(.*?)\"(.*?)\>#i', 
                        '<iframe$1 src="$2&wmode=transparent"$3>',  $content);

Perfect! This worked for me! No z-index problems and no clientside DOM manipulations anymore. ... Many thanks for the quick answer, the great solution(s) and the awesome regex-magic! =) ... (Maybe I will use the safer solution via DomDocument and "src"-rebuild later after some testing.) THX — LosMikEos, Jan 30 '13 at 02:20

Add "wmode" parameter to src of an iframe with PHP

1 Answers1