Programadores 3 dolares a quien logre hacer responsive este video

Nick · 1 Mar 2015

Hola, me he roto la cabeza :dale2: tratando de hacer responsive estos vídeos de powvideo, entonces se me ocurrió recurrir a los integrantes del foro y hacer una especie de reto, la idea es poder incrustarlos en un blog con theme responsivo, 3 dolares a quien de la mejor y mas sencilla solución al problema, les dejo el codigo embed que da la pagina por defecto: :mola:

<IFRAME SRC="http://powvideo.net/embed-phf56pt4n1h5-954x562.html" frameborder="0" marginwidth="0" marginheight="0" scrolling="NO" width="954" height="562" allowfullscreen="true"></IFRAME>

PD: Disculpad la publicidad en el vídeo, no hay manera de quitarla

Bleed · 1 Mar 2015

Mira a ver aqui : https://foro20.com/programadores/

Que para eso es la seccion de negocios.

Checa · 1 Mar 2015

Pon el Iframe en un div, supongamos que el div se contenedor-responsive, luego en el css insertas:

.contenedor-responsive {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

Y

.contenedor-responsive iframe,
.contenedor-responsive object,
.contenedor-responsive embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Espero que te sirva

Un saludo!

ToniLima · 1 Mar 2015

Moviendo a negocios

- - - Actualización- - -

Checa dijo:
Pon el Iframe en un div, supongamos que el div se contenedor-responsive, luego en el css insertas:

Y

Espero que te sirva
Un saludo!

Se a que se refiere y no es eso,

Nick · 1 Mar 2015

Bleed dijo:
Mira a ver aqui : https://foro20.com/programadores/

Que para eso es la seccion de negocios.

Gracias, si no va aquí el tema por favor un mod que lo mueva

- - - Actualización- - -

Checa dijo:
Pon el Iframe en un div, supongamos que el div se contenedor-responsive, luego en el css insertas:

Y

Espero que te sirva
Un saludo!

Este truco ya lo probé y no funciono, gracias

elasesor · 1 Mar 2015

para empezar el video debe estar envuelto en la etiqueta <object>

si es con iframe al ser externo;
<div class="padre">
<div class="contenedor">
<iframe src="http://www.youtube.com/embed/blablablabla?rel=0"></iframe>
</div>
</div>
.padre{
width:560px; /* Ancho máximo */
margin:auto; /* Centramos el vídeo */
}
/* El contenedor con el padding-top crea el tamaño del vídeo */
.contenedor{
height:0px;
width:100%;
padding-top:56.25%; /* Relación: 16/9 = 56.25% */
position:relative;
}
/* El iframe se adapta al tamaño del contenedor */
.contenedor iframe{
position:absolute;
height:100%;
width:100%;
top:0px;
left:0px;
}

y los % salen de:
dividiremos el alto entre el ancho, y el padding-top se adaptará según esta relación al ancho
16:9 ---> 9/16*100 = 56,25%
4:3 ---> 3/4*100 = 75%

Nick · 1 Mar 2015

Toño Lima dijo:
Moviendo a negocios

- - - Actualización- - -

Se a que se refiere y no es eso,

Tienes razón Toni, no es eso a lo que me refiero, gracias por mover el hilo :mola:

jonay · 1 Mar 2015

No se puede hacer lo que pides, xk su reproductor no es responsive... por tanto por mucho que hagas siempre saldrá cortado. Aunque... emulando un móvil en Chrome (o entrando desde un móvil) si se me hizo responsive sin cortarse, por tanto lo que te dijo el usuario @Checa debería valerte, el único inconveniente que hay es, que se adapta a la pantalla como el responsive de Google Adsense.

elasesor · 1 Mar 2015

jonay dijo:
No se puede hacer lo que pides, xk su reproductor no es responsive... por tanto por mucho que hagas siempre saldrá cortado. Aunque... emulando un móvil en Chrome (o entrando desde un móvil) si se me hizo responsive sin cortarse, por tanto lo que te dijo el usuario @Checa debería valerte, el único inconveniente que hay es, que se adapta a la pantalla como el responsive de Google Adsense.

Que siempre saldra cortado? una imagen no es responsive, la conviertes, con los objetos se realiza lo mismo

otro ejemplo:
<div class="video">
<iframe width="560" height="349" src="http://www.youtube.com/embed/blablablabla=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>
.video {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

jonay · 1 Mar 2015

elasesor dijo:
Que siempre saldra cortado? una imagen no es responsive, la conviertes, con los objetos se realiza lo mismo

otro ejemplo:
<div class="video">
<iframe width="560" height="349" src="http://www.youtube.com/embed/blablablabla=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>
.video {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Como ya dije, siempre saldrá cortado. Por mucho que hagas el iframe responsive si el reproductor de DENTRO del iframe no lo es, saldrá cortado.

Ejemplo:

elasesor · 1 Mar 2015

@jonay entonces no entendi bién antes a lo que te referias

ToniLima · 1 Mar 2015

Estamos en la zona de negocios señores, recordarlo

Nick · 1 Mar 2015

Tema arreglado, encontré un rep que lo hace automáticamente, gracias a quienes respondieron, solicito cerrar tema a algún mod

ToniLima · 1 Mar 2015

cierro tema

Programadores 3 dolares a quien logre hacer responsive este video

Comparte esta página