YouTube iframe embedded in SVG moves to front whilst playing in Chrome
If you don't want to have z-index issues, output the <circle> tag first, then the video/video's container; the order matters (the last object will automatically be on top). Also make sure youkeep the "wmode=opaque" parameter declared on YouTube videos like you already had it, as without that, the video will come on top regardless.
<svg height="600" version="1.1" width="550" xmlns="http://www.w3.org/2000/svg"> <circle cx="250" cy="250" r="150" fill="#ff0000"></circle> <foreignObject x="10" y="10" height="300" width="500"> <div xmlns="http://www.w3.org/1999/xhtml"> <iframe xmlns="http://www.w3.org/1999/xhtml" width="500" height="300" src="http://www.youtube.com/embed/jOV1-mkIOd0?wmode=opaque" frameborder="0"> </iframe> </div> </foreignObject></svg>