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

  • Autor Autor xaiborweb
  • Fecha de inicio Fecha de inicio
xaiborweb

xaiborweb

Programador
No recomendado
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
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 🙂
 
Última edición:
gracias por el tutorial

- - - Actualizado - - -

gracias por el tutorial
 
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
 
la verdad muy bueno se agradece :encouragement: estube intentando hacer algo igual y no pude
 
Hola Xaiborweb.

Muchísimas gracias por el tuto! Me resultará muy útil :encouragement:
 
Me cae como anillo al dedo, estuve buscando esto para un nuevo proyecto.

Mil gracias. :love_heart:
 
gracias por el aporte, tal vez sirva :encouragement:
 
NOTA: recomiendo utilizar publicidad en iframes ya que esta es el único formato que e probado
 
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
 
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 🙂
 
She parece al mio xD pero menos pesao creo o puede ser el mismo jeje
 
sirve para wordpress y blogger por igual?
 
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 🙂

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
 
donde hay que insertar la publicidad??

también sirve con vídeos de Youtube??
 
Muy buen aporte gracias!
 
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 - - -

Muy buen aporte gracias!

de nada brother para eso estamos para ayudarnos mutuamente
 
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:
 
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 🙂
 
Última edición:
buen aporte ,esto de poner publicida al reproductor :encouragement:
 
Atrás
Arriba