Como Ponerle marco a un video



Hoy les traigo un codigo de como ponerle un marco a nuestro video, en lo personal a mi me gusta mucho esto, pero ya veremos aqui les doy un ejemplo simple 

La forma de hacer una especie de marco a un vídeo, requiere diseñar en primer lugar la imagen que pretendemos que quede alrededor del vídeo. El tamaño exterior debe ser como máximo el que tenga nuestra columna de posts y en su interior, debería tener una zona de un color uniforme que será dónde solapemos el reproductor. El tamaño de esa zona, tiene que ser proporcional al tamaño del vídeo. ¡Ah! Y antes de seguir, donde digamos vídeo, bien puede ser una animación flash o cualquier otro objeto que se pueda embeber.

Lo que haremos será crear una capa con posición relativa, con el tamaño del dibujo diseñado y con este como fondo. RELATIVE sin más atributos, deja esta capa en su ubicación normal, pero es necesario para poder posicionar correctamente lo que queramos poner dentro de ella.

Después anidaremos otra capa con una posición absoluta para así poder ubicar el vídeo exactamente dónde nos convenga. Dentro de esta segunda capa, irá el código del objeto embebido. ABSOLUTE nos permitirá movernos dentro del la primera capa (la del fondo). La coordenada 0,0 será el vértice superior izquierdo de dicha capa.

>


El codigo seria el siguiente:

CODIGO<div style="margin: 0px auto; background: transparent
url(Imagen de marco) repeat scroll 0% 0%; position: relative; width: 594px; height: 337px; display: block; text-align: center; cursor: pointer; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"><div style="position: absolute; top: 12px; left: 13px;"><object height="594" width="337"><iframe allowfullscreen="" frameborder="0" height="311" src="Video id ejemplo Youtube" width="568"></iframe> </embed></object></div></div>

Y ya cuando crean una imagen personal o la que desean entonces solo teen que acomodar los (height y width) segun el espacio que tengan para el video y para posicionar serian (top: y left:) 
ya cuando este todo listo quedara algo asi:



referencia:
Casper Chan
Around JAPAN

Entradas similares

0 Comentarios