Estou criando um novo plugin bookmarklet que será aplicado sobre qualquer página de video do Youtube, onde tenho que adicionar uma div
flutuante no body
, fazendo assim o appendChild
no DOM.
No entanto esta ocorrendo uma falha, esta div
flutuante fica atraz do Player e das Thumbnails, tornando um incômodo para quem vai visualizá-la.
O que preciso é sobrepor a div
futuante sobre o Player e Thumbnails.
Para se ter uma idéia real do que ocorre, convido você a executar o plugin abaixo em seu navegador web, com um vídeo qualquer do Youtube, pré-carregado.
Código
javascript: (function() {
var add = document.createElement('div');
add.id = "pop";
add.style.display = "block";
add.style.position = "fixed";
add.style.top = "0%";
add.style.left = "0%";
add.style.width = "100%";
add.style.height = "100%";
add.style.background = "black";
add.style.opacity = ".80";
document.body.appendChild(add);
document.getElementById("pop").innerHTML = [
'<div style="display: block;position: fixed;top: 50%;left: 50%;margin-left: -150px;margin-top: -100px;padding: 10px;width: 300px;height: 200px;border: 1px solid #d0d0d0;background: whitesmoke;">' +
'<span style="float:right;"><a href="javascript:(function(){document.getElementById(\'pop\').style.display=\'none\';}());">[Fechar]</a></span>' +
'<br><br>' +
'</div>'
];
}());
Agora o código ja pré-formatado para bookmarklet
<a href="javascript: (function() { var add = document.createElement('div'); add.id = 'pop'; add.style.display = 'block'; add.style.position = 'fixed'; add.style.top = '0'; add.style.left = '0'; add.style.width = '100%'; add.style.height = '100%'; add.style.background = 'black'; add.style.opacity = '.80'; document.body.appendChild(add); document.getElementById('pop').innerHTML = '<div style=\'display: block;position: fixed;top: 50%;left: 50%;margin-left: -150px;margin-top: -100px;padding: 10px;width: 300px;height: 200px;border: 1px solid #d0d0d0;background: whitesmoke;\'><span style=float:right;><a href=javascript:(function(){document.getElementById(\'pop\').style.display=\'none\';}());>Fechar</a></span><br><br></div>' }());">BookMarklet</a>
<pre>
Clique e Arraste-o para barra de marcadores de seu navegador
Abra um link do video do youtube por exemplo - <a href="https://www.youtube.com/watch?v=DipPJp1Ls5E">https://www.youtube.com/watch?v=DipPJp1Ls5E</a>
Aguarde o carregamento completo da página do video
E logo clique sobre este plugin ja incluso na sua barra de favoritos
Agora confira o que acontece, como descrevi na pergunta
</pre>