Enmarcar vídeos. Ejemplo del uso de POSITION.

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.

Para una imagen de fondo como la primera de este post (400x400 px) que puede alojar un vídeo de 320x265 px, el código tendría esta forma (1):

<div style="display: block; position:relative; width:400px; height:400px; margin: 0px auto; text-align: center; background:url(URL_IMAGEN_FONDO);">

<div style="position:absolute; top:44px; left:39px;">
CODIGO OBJETO
</div>

</div>

Y el resultado sería este:

(1) Para una mayor claridad el código se ha separado con saltos de línea, pero para poder colocarlo en una entrada, tendría que redactarse todo seguido, sin saltos.

Habreis podido ver que en la capa donde insertamos el código del vídeo, utilizamos top y left, en unión de position:absolute, para poder posicionar el objeto justo dónde queremos.

Si es necesario cambiar el tamaño original del vídeo, habrá que hacerlo de forma proporcional para que quede lo mejor posible.


El uso de la propiedad POSITION nos permite incluso meter más de un vídeo en la misma carátula:

<div style="display: block; position:relative; width:500px; height:375px; margin: 0px auto; text-align: center; background:url(URL_IMAGEN_FONDO);">

<div style="position:absolute; top:191px; right:50px;">
CODIGO OBJETO
</div>

<div style="position:absolute; top:58px; right:12px;">
CODIGO OBJETO
</div>

<div style="position:absolute; top:48px; left:12px;">
CODIGO OBJETO
</div>

</div>

Si siempre vamos a utilizar el mismo marco, podemos incluso crear una clase para evitarnos redactar tanto código en todas las ocasiones. Por ejemplo, para una carátula de 500x947 px y vídeos de 425x344 px, necesitariamos crear estas dos id en nuestra parte CSS:

#marco {
display: block;
position: relative;
width: 500px;
height: 947px;
margin: 0px auto;
text-align: center;
background:url(URL_IMAGEN_FONDO);
}
#video {
position:absolute;
top:240px;
left:39px;
}

Y luego insertar este HTML en el post (o dónde corresponda):

<div id="marco"><div id="video">CODIGO OBJETO</div></div>

De igual manera que hemos hecho con los marcos y los vídeos, podemos hacer para situar cualquier elemento dentro de una capa (DIV) que tenga el atributo POSITION:RELATIVE;. Y esto último es tarea para practicar en casa :D

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter