Add "wmode" parameter to src of an iframe with PHP - 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&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&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?

Answer 1

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);