Superponer reproductor en imagen de forma efectiva

Elpadrotte · 7 Sep 2013

Bueno es sencillo
Quiero lograr lo siguiente
Que en una imagen sobreponer el codigo del reproductor logrando un efecto similar a este.

checar donde esta la tv y fijense que tiene el efecto se una sala pero en medio tiene el repro y detras la imagen de la tv.}algo asi

Si no me equivo es una especie de css o algun mapeo de la imagen que se yo. Ojala me puedan hechar una liana.
Si no es mucho pedir tambien quiero saber como poner objetos sobre una imagen ya sea un link algun video,un reproductor de radio etc.
En pocas palabra es que la imagen quede atras y encima las cosas que quiera
De antemano les agradesco su ayda

Sent from my BlackBerry 8520 using Tapatalk

victorvu · 7 Sep 2013

No me carga la pagina que pusiste

Elpadrotte · 8 Sep 2013

victorvu dijo:
No me carga la pagina que pusiste

listo link corregido espero lo cheques y me heches una mano

Franyer Rivas · 8 Sep 2013

no se mucho de diseño pero creo que simplemente es crear una imagen como fondo y con ayuda de css alinear la div del reproductor exactamente al centro del área vacía de la imagen de fondo
fijate que todo es una imagen
imagen 1

imagen 2

algun diseñador te puede ayudar con eso

el css

HTML:

[URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=contenidobacktv]#contenidobacktv[/URL] {
	border-style: none;
	position: absolute;
	margin: 0px;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 544px;
	z-index: 0;
	background-color: [URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=20C154]#20C154[/URL] ;
}
[URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=contenidobacktv]#contenidobacktv[/URL] 100{
	border-style: none;
	position: absolute;
	margin: 0px;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 544px;
	z-index: 0;
}
[URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=imagenbacktv]#imagenbacktv[/URL] {
	border-style: none;
	position: absolute;
	background-color: [URL=http://forobeta.com/usertag.php?do=list&action=hash&hash=2cbe59]#2cbe59[/URL] ;
	margin: 0px;
	left: 50%;
	top: 0px;
	margin-left: -680px;
	width: 1249px;
	height: 544px;
	z-index: 0;
}

el html

HTML:

<div id="contenidoTV" class="">
<div id="mueble"><img src="img/contenidos/tv/img/mesa.png" alt="mesaTV" height="160" width="797"></div>
<div id="backTV"><img src="img/contenidos/tv/img/tv.png" alt="backTV" height="380" width="660"><div id="videoHD"><iframe src="http://player.vimeo.com/video/46112940" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" frameborder="0" height="324" width="607"></iframe></div></div>
</div>

claro no es cuestión de copiar y pegar, hay que hacer ajustes que para que quede bien alineado en el lugar donde lo usaras

Superponer reproductor en imagen de forma efectiva

Elpadrotte Seguir

victorvu

Elpadrotte

Franyer Rivas