Música en una ventana Flotante

Viendo en el post anterior. Como poder diseñar una ventana publicitaria nos toca jugar con ellas en este caso os voy a presentar dos variantes del mismo código con funciones diferentes:
Una primera seria un reproductor de audio y la segunda un vídeo de youtube.

Bueno el código para esta ventana tendríamos unos estilos css normal para cualquier ventana.
Luego le añadimos un scripts para ayudar en el cierre de la misma.
Y por ultimo añadimos el Html con la diferencia del código de inserción del reproductor  en Html5 para mejor funcionalidad. A este mismo código mas tarde le vamos a eliminar ese código y le insertaremos un inframe para vídeos. Todo lo demás se quedara tal cual.

1º el código de inserción completo para Musica:

 <center>
<style type="text/css">
#anuncio {
position: absolute;
border: 0px;
padding: 2px;
width: 300px;
height: 80px;
visibility: hidden;
z-index: 200;
top: 27px;
left: -13px;
}
</style>


<script type="text/javascript">
//<![CDATA[
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("anuncio").style.visibility="hidden"
}

function staticbar(){
barheight=document.getElementById("anuncio").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("anuncio");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
//]]>
</script>


<br />
<div id="anuncio">
<a href="javascript:void" onclick="closebar(); return false"><img align="right" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLtxlhdTbnt2TQ4v6utUNOfk7ugMxLvLXUcqs044tu5InDX0ywn9yhRybZkjhNRuURx3qY6P1Be3M1ecBkEpRaJYOjnDrufrFjVitkKXzo3A3QDIlb7_WxF72eaq0ksZot4rUbEbc_nBOV/s14/icono-cerrar.png" /></a><br />
<audio controls autoplay loop>
<source src="URL del archivo mp3" type="audio/mpeg"></source>
<source src="URL del archivo ogg" type="audio/ogg"></source>
<embed height="100" src="URL del archivo mp3" type="audio/mp3" width="200"></embed>
</audio>
</div>

2º Código de inserción para Vídeos:

 <center>
<style type="text/css">
#anuncio {
position: absolute;
border: 0px;
padding: 2px;
width: 300px;
height: 80px;
visibility: hidden;
z-index: 200;
top: 27px;
left: -13px;
}
</style>


<script type="text/javascript">
//<![CDATA[
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("anuncio").style.visibility="hidden"
}

function staticbar(){
barheight=document.getElementById("anuncio").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("anuncio");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
//]]>
</script>


<br />
<div id="anuncio">
<a href="javascript:void" onclick="closebar(); return false"><img align="right" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLtxlhdTbnt2TQ4v6utUNOfk7ugMxLvLXUcqs044tu5InDX0ywn9yhRybZkjhNRuURx3qY6P1Be3M1ecBkEpRaJYOjnDrufrFjVitkKXzo3A3QDIlb7_WxF72eaq0ksZot4rUbEbc_nBOV/s14/icono-cerrar.png" /></a><br />

<iframe width="100%" height="315" src="https://www.youtube.com/embed/jRgpkvEgL-c" frameborder="0" allowfullscreen></iframe>

</div>

Fácil verdad pues con un poco de código podemos hacer casi de todo:

Como podéis ver en mi ejemplo en esta misma entrada yo he añadido el html que hace llamamiento al reproductor de audio y con un autoplay y a continuación dentro de la misma etiqueta el código inframe que hace llamamiento a un vídeo en este caso de youtube.
Si pulsamos la x cierra la ventana pero ojo si no paramos la reproducion seguirá igualmente pero en segundo plano.

----------------------------------------

x