Crear un Reproductor personal en HTML

Hoy les voy a mostrar como crer una especie de "reproductor personal" para tu blog o web....

Es un simple div con una imagen de fondo y un borde...pero le da un pequeño toque personal al sitio

Primero creamos el div...

<div style="border: 8px solid gray; height: 626px ! important; width: 607px;"></div>

En este caso y usé esta imagen... la imagen puede variar

en Direccion de la imagen, iría la url de la imagen por ejemplo http://servidor.com/imagen.jpg

Ahora viene el titulo del video

Lo voy a poner en una lista así se puede personalizar mas facil

<ul style="list-style: none; margin: 14px 2px 4px; color: gray!important; "><li style="border-bottom: 2px solid gray; ">Titulo</li></ul>

puse los estilos ahí nomas...

Tabien pueden hacerlo usar un class (para todos los que lleven estilos)

<ul class="titulo"><span class="tituloLI">El desafio a la muerte</span></li></ul>

y detro del head de la pagina o sino dentro del mismo post dentro de la etiqueta
<style>

iría el css

#titulo {

list-style: none;

margin: 14px 2px 4px; /*la posicion del titulo*/

font-size:16pt; /*El tamaño del texto*/

color: gray!important; /* color del texto*/

font-family: trebuchet ms; /* La fuente*/

}

#tituloLI {

border-bottom: 2px solid gray; /* el subrayado*/

}

Ahora si, el video:


Voy a usar uno de YouTube

Youtube no tira algo así

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/PJw8rSF6gOA&hl=es&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/PJw8rSF6gOA&hl=es&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

Lo gris es lo que está de mas

Este reproductor está creado para videos de 580x490 (aprox) sino se cumple eso despues se va a tener que modificar el tamaño del div. Entonces cambiamos width="425" height="344" por width="580" height="490". Ademas le agegamos las etiquetas <center> y </center>

, una al principio y la otra al final...

no quedaría algo así

<center><embed src="http://www.youtube.com/v/PJw8rSF6gOA&amp;hl=es&amp;fs=1&amp;color1=00000000" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="580" height="490"></embed></center>

Ahora lo que queda es el logo o simplemente texto

<center><img src="Direccion del logo o imagen" /></center>

O simplemente un texto cualquera (al que se le puede dar propiedades)

Ahora cerramos el div

y listo!

así seria el codigo terminado (recuerden que pueden poner los estilos aparte)

<div style="border: 8px solid gray; background: black url(http://i34.tinypic.com/53spz4.jpg) repeat-x;width: 607px; height: 626px ! important;">

<ul style="margin: 14px 2px 4px; list-style-type: none; "><li style="border-bottom: 2px solid gray; margin: 4px;"><span >El Titulo</span></li></ul>

</ul><center><embed src="http://www.youtube.com/v/PJw8rSF6gOA&amp;hl=es&amp;fs=1&amp;color1=00000000" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="580" height="490"></embed>

<img alt="http://i35.tinypic.com/a4otgl.jpg" src="http://i35.tinypic.com/a4otgl.jpg" /></center>

</div>

Ahora tendriamos que eliminar los saltos de linea para que no se armen lios

<div style="border: 8px solid gray; background: black url(http://i34.tinypic.com/53spz4.jpg) repeat-x; width: 607px; height: 626px ! important;"><ul style="margin: 14px 2px 4px; list-style-type: none; font-size:16pt;color:gray ! important;"><li style="border-bottom: 2px solid gray; margin: 4px;"><span style="font-family:trebuchet ms;">El Titulo</span></li></ul><center><embed src="http://www.youtube.com/v/PJw8rSF6gOA&amp;hl=es&amp;fs=1&amp;color1=00000000" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="580" height="490"></embed><img alt="http://i35.tinypic.com/a4otgl.jpg" src="http://i35.tinypic.com/a4otgl.jpg" /></center>
</div>

Así quedaria

• El desafio a la muerte

Despues si lo que queren es reescalarlo lo que pueden hacer es sacarle la misma catindad de pixeles a cada medida, tanto la del video como la del div...

Por ejemplo le saco 100px a cada medida

Al esto del div: width: 597px; height: 616px
Lo reemplazaría por esto: width: 497px; height: 516px

Y al video..

Esto: width="580" height="490"
Lo cambiaría por esto: width="480" height="390"

Quedando así:

• El desafio a la muerte