Cómo implementar publicidad en cualquier reproductor con una pestaña de cerrar

xaiborweb · 28 Ene 2013

HOLA COMPAÑEROS DEL FORO

Bueno como estuve buscando un muy buen rato un código que me permitiera implementar publicidad en frente de cualquier reproductor con una pestaña de cerrar que cambiara de posición al pasar el maus

y como me resulto muy difícil encontrarlo ya que por mas que buscaba y preguntaba no lo conseguía solo hasta que me arme de coraje y empece a tirar código de lo que se de programación y vi que al igual que yo hay mucha gente buscando algo parecido

pues aquí va

1) html donde quieres que aparesca el reproductor con la publicidad

HTML:

<div>			
	<div id="publicidad-video">
	<IFRAME FRAMEBORDER="0" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="NO" WIDTH="300" HEIGHT="250" SRC="su publicidad"></IFRAME>
	<br>
	<div style="float: left; left: 180px; position: relative; top: -210px; z-index: 9999;">
	<span class="jbtn" onmouseover="jQuery(this).hide('fast');jQuery('#asd1').show('slow')">cerrar</span>
	</div>
	<div id="asd1" style="display: none; float: left; position: relative; top: -65px; z-index: 9999;">
	<span class="jbtn" onclick="jQuery(this).parent().parent().remove();">cerrar</span>
	</div>
	</div>	
	<iframe src="http://vk.com/video_ext.php?oid=198057043&id=164294950&hash=ca0131ef7fe7b297&hd=1" width="610" height="300" frameborder="0"></iframe>
</div>

2) css

HTML:

#publicidad-video{
	position: absolute;
	z-index: 1;
	width: 300px;
	height: 250px;
	margin: 20px 0px 0px 160px;
}

.jbtn {
background: #A90000;
color: #fff;
border: 1px solid #fff;
border-radius: 3px;
padding: 2px;
cursor: pointer;
}

.jbtn:hover {
background: #F00;
}

bueno espero les sirva cualquier duda comenten saludos 🙂

jackemathe · 28 Ene 2013

gracias por el tutorial

- - - Actualizado - - -

gracias por el tutorial

xaiborweb · 28 Ene 2013

jackemathe dijo:
gracias por el tutorial

- - - Actualizado - - -

gracias por el tutorial

de nada brother es un pequeño tutorial para que aquel que tenga un problema parecido no pase por lo que yo para conseguirlo

que al final tuve que programarlo yo mismo jejej aunque no es tan difícil la verdad

peelink · 28 Ene 2013

la verdad muy bueno se agradece :encouragement: estube intentando hacer algo igual y no pude

itxel · 29 Ene 2013

Hola Xaiborweb.

Muchísimas gracias por el tuto! Me resultará muy útil :encouragement:

xaiborweb · 29 Ene 2013

itxel dijo:
Hola Xaiborweb.

Muchísimas gracias por el tuto! Me resultará muy útil :encouragement:

de nada me alegro que les sirva compañeros
para eso estamos para ayudarnos mutuamente no saludos 🙂

peelink dijo:
la verdad muy bueno se agradece :encouragement: estube intentando hacer algo igual y no pude

Vika · 29 Ene 2013

Me cae como anillo al dedo, estuve buscando esto para un nuevo proyecto.

Mil gracias. :love_heart:

lobogris · 29 Ene 2013

gracias por el aporte, tal vez sirva :encouragement:

xaiborweb · 29 Ene 2013

NOTA: recomiendo utilizar publicidad en iframes ya que esta es el único formato que e probado

almabasa · 29 Ene 2013

Re: [APORTE] publicidad en frente de un reproductor con movimiento de pestaña cerrar

Ejemplo de publicidad i frame?

Enviado desde mi GT-S5830M usando Tapatalk 2

xaiborweb · 29 Ene 2013

almabasa dijo:
Ejemplo de publicidad i frame?

Enviado desde mi GT-S5830M usando Tapatalk 2

actualizo

ya lo probé con publicidad de adbooth en formato ajax script y iframes y con las tres funciona de maravilla 🙂

Wext · 29 Ene 2013

She parece al mio xD pero menos pesao creo o puede ser el mismo jeje

DM200 · 29 Ene 2013

sirve para wordpress y blogger por igual?

xaiborweb · 29 Ene 2013

Wext dijo:
She parece al mio xD pero menos pesao creo o puede ser el mismo jeje

no amigo si miras cuando tu me pasaste el codigo yo ya había posteado ya que la impaciencia me domino y decidí programarlo yo mismo
pero muchas gracias 🙂

DM200 dijo:
sirve para wordpress y blogger por igual?

claro que si si te fijas no ocupa ninguna función php ni nada por el estilo lo único raro es una linea de código en jquery

dannaya · 29 Ene 2013

donde hay que insertar la publicidad??

también sirve con vídeos de Youtube??

anferro · 29 Ene 2013

Muy buen aporte gracias!

xaiborweb · 29 Ene 2013

dannaya dijo:
donde hay que insertar la publicidad??

también sirve con vídeos de Youtube??

la publicidad si te fijas en el codigo esta claro mira aquí

HTML:

<div id="publicidad-video">
	<IFRAME FRAMEBORDER="0" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="NO" WIDTH="300" HEIGHT="250" SRC="su publicidad"></IFRAME>

y sirve para cualquier reproductor por que solo es css con las propiedades adsoluta y relativa

- - - Actualizado - - -

anferro dijo:
Muy buen aporte gracias!

de nada brother para eso estamos para ayudarnos mutuamente

peelink · 29 Ene 2013

la verdad no puede con blogger intento poner publi de adbooth iframe arriba de un video vk y no puedo :ambivalence: ya me lei todo en google y la verdad no hay mucha info me doy porvencido igual gracias por el aporte seguro soy yo que estoy cometiendo algun error de novato :ambivalence:

xaiborweb · 29 Ene 2013

peelink dijo:
la verdad no puede con blogger intento poner publi de adbooth iframe arriba de un video vk y no puedo :ambivalence: ya me lei todo en google y la verdad no hay mucha info me doy porvencido igual gracias por el aporte seguro soy yo que estoy cometiendo algun error de novato :ambivalence:

bueno brother esta raro eso

1) imprime publicidad de adbooth en iframe de 300 x 250 y ponlo en un sidebar para ver si te aparece la publicidad por que parece que esta dando problemas la publicidad en iframe

2) como ves en mi codigo utilizo dos lineas de scritp jquery

onmouseover="jQuery(this).hide('fast');jQuery('#asd1').show('slow')"
onclick="jQuery(this).parent().parent().remove();"

averigua si blooger soporta ese lenguaje

3) te dejo el codigo completo mio con mi publicidad

HTML:

<div id="publicidad-video">
	<IFRAME FRAMEBORDER="0" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="NO" WIDTH="300" HEIGHT="250" SRC="http://yieldmanager.adbooth.net/st?ad_type=iframe&ad_size=300x250&section=4046667"></IFRAME>
	<span class="cerrar" onmouseover="jQuery(this).hide('fast');jQuery('#mover').show('slow')">cerrar</span>
	<div id="mover" style="display: none;"><span onclick="jQuery(this).parent().parent().remove();">cerrar</span></div>
	</div>	
	<iframe src="http://vk.com/video_ext.php?oid=198057043&id=164294950&hash=ca0131ef7fe7b297&hd=1" width="610" height="300" frameborder="0"></iframe>

css

HTML:

/**Publicidad sobre video**/
#publicidad-video{
	position: absolute;
	z-index: 1;
	width: 300px;
	height: 250px;
	margin: 20px 0px 0px 160px;
}
.cerrar{
	float: left; 
	left: 180px; 
	position: relative; 
	top: -210px; 
	z-index: 9999;
	background: #A90000;
	color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	padding: 2px;
	cursor: pointer;
}
#mover{
	float: left; 
	position: relative; 
	top: -65px; 
	z-index: 9999;
	background: #A90000;
	color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	padding: 2px;
	cursor: pointer;
}
#mover:hover {
background: #F00;
}

cabe aclarar que yo lo tengo implementado en wordpress pero me base en esta web

4) tira picardea que eso debe de ser alguna pequeñez que estas haciendo mal

suerte y espero puedas solucionarlo cualquier cosa que no puedas comentas para mira haber que se puede hacer ok saludos 🙂

bacanzito · 8 Feb 2013

buen aporte ,esto de poner publicida al reproductor :encouragement:

Cómo implementar publicidad en cualquier reproductor con una pestaña de cerrar

xaiborweb

jackemathe

xaiborweb

peelink

itxel

xaiborweb

Vika

lobogris

xaiborweb

almabasa

xaiborweb

Wext

DM200

xaiborweb

dannaya

anferro

xaiborweb

peelink

xaiborweb

bacanzito

Temas similares