Superponer elementos HTML sobre Youtube

¿Cómo superponer elementos HTML sobre vídeos de Youtube?

Recientemente he tenido algún problema con vídeos de Youtube que aparecían por encima de elementos HTML como por ejemplo menús desplegables (especialmente en el dichoso Internet Explorer). Solucionarlo no es complicado, para ello debemos añadir el parámetro wmode=transparent a la url del iframe, para hacer esto necesitamos usar JavaScript. En el siguiente ejemplo hecho con jQuery se buscan iframes dentro de un div con id “#content”, se le quita todos los parámetros a la url del mismo, ya que el parámetro que debemos añadir debe estar en primer lugar y se añaden los nuevos.

$(document).ready(function() {
  params = '?wmode=transparent&rel=0';
  url = $('#content').find('iframe').attr('src');
  url = url.split('?');
  url = url[0] + params;
  $('#content').find('iframe').attr('src', url);
});

Youtube

banner