Ir al contenido principal

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
http://i35.tinypic.com/a4otgl.jpg



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
http://i35.tinypic.com/a4otgl.jpg

Comentarios

Entradas populares de este blog

¿Sabías esto? Curiosidades para culturizarse

¿Sabias esto? Hola! en este post les voy a mostrar algunas curiosidades, no enfocadas a un tema especifico.. sino a todo en general...
Para que se culturicen!

EMPECEMOS...



T I T A N I C



En 1898, catorce años antes de que el Titanic zarpara, el marino estadounidense Morgan Robertson escribió una novela llamada Futilidad, sobre un lujoso barco que se hunde en su viaje inaugural al chocar contra un iceberg en el Atlántico. La nave, era la más grande del mundo, con un casco triple e imposible de hundir. Sus pasajeros eran la crema y nata de la aristocracia y además, no había suficientes botes salvavidas. El nombre de la embarcación era, créalo, El Titán.



LA IZQUIERDA y LA DERECHA



¿Sabías a qué se debe la denominación de DERECHA E IZQUIERDA de las tendencias políticas? En la Asamblea francesa de 1789, los conservadores se sentaron a la derecha del presidente de ésta y los radicales lo hicieron a la izquierda.



IRANGATE, PEMEXGATE, etc.



¿Sabes porqué a varios escándalos políticos se les l…

Megapost discografías de metal [MEDIAFIRE]

Aquí le presento esta gran colección discografías de metal en MEDIAFIRE!! son en total 47 discografías!!!  estan disco por disco en una carpeta para cada banda...


Para los que pidan pass:

metalbajo0.blogspot.com

+50 Juegos portables para pcs modestas

Cuantas veces no ha pasado que vamos a lo de un amigo justo para darnos cuenta que este no tiene juegos, pues esto ya no es problema, simplemente carga tu pendrive/celular o Mp3 con estos juegos y te aseguras la diversión por muchas horas.

Más de 50 juegos portables (59 o 58 si no me equivoco) para que te diviertas un rato en donde sea!




Pack de 35 en 1 !




Peso Total: 368 MB | EXE y SFX

Contendido del Pack.

1. The Great Mahjong
2. Tank Assault
3. Star Ball
4. Sonic
5. Sky Fire
6. Silver Klondike Solitaire
7. ScaraBall
8. Sawoid
9. RIP3
10. Real Race
11. Real Pool
12. Real Poker
13. Real Dominoes
14. Real Chess
15. Real Checkers
16. Real Bowling
17. Real Backgammon
18. Pac-Manic Worlds
19. Onslaught
20. Naval Strike
21. Mini Golf Pro
22. Mario Forever
23. Magic Jigsaw
24. Mad Truckers
25. KGB Hunter
26. Imperial Sudoku
27. Golden Dozen Solitaire
28. Gem Mine
29. Galaxy Invaders
30. Extreme Racers
31. Diamond Spider Solitaire
32. Deadly Stars
33. Crimson Road
34. Crazy Birds
35. Air…