Optimiza el CSS de vídeos en iFrame para móviles en WordPress

allistar19 · 21 Mar 2019

Hola, estoy en proceso de montar una web nopor y me he topado con una pagina bastante conocida llamada yespornplease. com y me gustaria saber como crear el aspecto css para que los videos iframe se vean asi desde movil.

He hecho unas pruebas con mi wordpress, y en desktop se ve igual, pero en movil se descuadra, por lo que supongo que tiene algo tocado para que se vean asi.

memeringo · 21 Mar 2019

[MENTION=77245]allistar19[/MENTION], saludos.

¿Podrías pasar una captura? Para saber como luce.

allistar19 · 21 Mar 2019

memeringo dijo:
[MENTION=77245]allistar19[/MENTION], saludos.

¿Podrías pasar una captura? Para saber como luce.

Asi es como se ve desde movil.

Mask7OfDragon · 21 Mar 2019

allistar19 dijo:
Ver el archivo adjunto 133632

Asi es como se ve desde movil.

eso es video html player.
es cuando un video no tiene reproductor (jwplayer, holaspark, videojs) etc

Simplemente revisa esto:
HTML5 Video

si detectas movil pones ese codigo
si detecta pc, pon jwplayer o otro mas bonito.

Cicklow · 21 Mar 2019

allistar19 dijo:
Ver el archivo adjunto 133632

Asi es como se ve desde movil.

yo uso

PHP:

video {  
   			width:100%; 
   			max-width:900px; 
   			height:auto; 
		}

uso el tag VIDEO de html... pero puedes meter eso en un div con width:100%... tambien puedes indicarle el minimo width y height... etc... el iframe, div, o video tiene que tener width:100%

memeringo · 21 Mar 2019

allistar19 dijo:
Ver el archivo adjunto 133632

Asi es como se ve desde movil.

Eso es un player HTML5 normal, verdad?

Eso se podría hacer con media querys, jugando con el webview.

allistar19 · 21 Mar 2019

memeringo dijo:
Eso es un player HTML5 normal, verdad?

Eso se podría hacer con media querys, jugando con el webview.

Reproductores como el de Openload cuando estas desde movil automaticamente se ven bien, pero los de esta web se ven igual en desktop que en mobile, por lo que descuadra la pagina.

Como nunca he tocado nada de programacion, no se si solo hay que meter un codigo para que se vea asi o es algo mas costoso que hay que configurarlo.

En el codigo de la pagina aparece esto:

<script>
var evideo_vkey = "243693116";
var video_width = "1920";
var video_height = "1080";
$( document ).ready(function() {

var vdiv = $('.video-container');
var width = vdiv.width();
height = Math.round(width / (video_width / video_height));
vdiv.css("height" , height);

var evdiv = $('.video-embedded');
var ewidth = evdiv.width();
eheight = Math.round(ewidth / 1.777);
evdiv.css("height" , eheight);

$(window).resize(function() {
var vwidth = $('.video-container').width();
vheight = Math.round(vwidth / (video_width / video_height));
$('.video-container').css("height" , vheight);

var evwidth = $('.video-embedded').width();
evheight = Math.round(evwidth / 1.777);
$('.video-embedded').css("height" , evheight);
});

if (window!=window.top) { self.parent.location="https://yespornplease. com/v/243693116"; }
});
</script>

memeringo · 21 Mar 2019

allistar19 dijo:
Reproductores como el de Openload cuando estas desde movil automaticamente se ven bien, pero los de esta web se ven igual en desktop que en mobile, por lo que descuadra la pagina.

Como nunca he tocado nada de programacion, no se si solo hay que meter un codigo para que se vea asi o es algo mas costoso que hay que configurarlo.

En el codigo de la pagina aparece esto:

<script>
var evideo_vkey = "243693116";
var video_width = "1920";
var video_height = "1080";
$( document ).ready(function() {

var vdiv = $('.video-container');
var width = vdiv.width();
height = Math.round(width / (video_width / video_height));
vdiv.css("height" , height);

var evdiv = $('.video-embedded');
var ewidth = evdiv.width();
eheight = Math.round(ewidth / 1.777);
evdiv.css("height" , eheight);

$(window).resize(function() {
var vwidth = $('.video-container').width();
vheight = Math.round(vwidth / (video_width / video_height));
$('.video-container').css("height" , vheight);

var evwidth = $('.video-embedded').width();
evheight = Math.round(evwidth / 1.777);
$('.video-embedded').css("height" , evheight);
});

if (window!=window.top) { self.parent.location="https://yespornplease. com/v/243693116"; }
});
</script>

Openload ha de tener algo ya implementado.

Ahí en ese player, aparentemente tiene la función implementada de que se redimencione.

Lo que deberías hacer en tu web, es ver tu player, como está configurado y si deseas hacerlo en css, ver algún class (o asignarselo) para que ese elemento cambie de tamaño.

Esto lo haces con media queries CSS media queries - CSS | MDN

También podrías hacerlo con el user-agent, usando php, o js, pero con CSS es mejor, ya que juegas con los tamaños.

Algo así, en realidad depende de tu player.

Si no sabes de código, podrías aprender, o en su defecto, contratar a alguien.

allistar19 · 21 Mar 2019

memeringo dijo:
Openload ha de tener algo ya implementado.

Ahí en ese player, aparentemente tiene la función implementada de que se redimencione.

Lo que deberías hacer en tu web, es ver tu player, como está configurado y si deseas hacerlo en css, ver algún class (o asignarselo) para que ese elemento cambie de tamaño.

Esto lo haces con media queries CSS media queries - CSS | MDN

También podrías hacerlo con el user-agent, usando php, o js, pero con CSS es mejor, ya que juegas con los tamaños.

Algo así, en realidad depende de tu player.

Yo no utilizo ningun player, solo cojo el codigo embed de su pagina.

<iframe allowfullscreen="true" src="https://yespornplease. com/e/243693116/width-650/height-400/autoplay-0/" width="650" height="400" frameborder="0" scrolling="no"></iframe>

Este por ejemplo. Con los de openload redimensiona bien, pero con los de esta pagina no. Pero el player es suyo, no mio. Por eso preguntaba.

memeringo · 21 Mar 2019

allistar19 dijo:
Yo no utilizo ningun player, solo cojo el codigo embed de su pagina.

<iframe allowfullscreen="true" src="https://yespornplease. com/e/243693116/width-650/height-400/autoplay-0/" width="650" height="400" frameborder="0" scrolling="no"></iframe>

Este por ejemplo. Con los de openload redimensiona bien, pero con los de esta pagina no. Pero el player es suyo, no mio. Por eso preguntaba.

Ahhhhhh...

En ese caso, supongo que podrías modificar el iframe (donde dice width y height).

Por ej. añadirle un class al iframe, y modificar conforme las resoluciones, el css...

allistar19 · 21 Mar 2019

memeringo dijo:
Ahhhhhh...

En ese caso, supongo que podrías modificar el iframe (donde dice width y height).

Por ej. añadirle un class al iframe, y modificar conforme las resoluciones, el css...

Como he comentando mas arriba, nunca he tocado programacion ni he editado ningun archivo de Wordpress salvo lo basico, por lo que ando un poco perdido sobre como hacerlo.

Las resoluciones si que he intentado cambiarlas, pero se veia igual.

memeringo · 21 Mar 2019

allistar19 dijo:
Como he comentando mas arriba, nunca he tocado programacion ni he editado ningun archivo de Wordpress salvo lo basico, por lo que ando un poco perdido sobre como hacerlo.

Las resoluciones si que he intentado cambiarlas, pero se veia igual.

Sería añadirle al iframe un class, como por ej. "tuclass" <iframe class="tuclass" allowfullscreen="true" src="https://yespornplease. com/e/243693116/autoplay-0/" frameborder="0" scrolling="no"></iframe>

Y luego, poner en el código css de tu web, algo como:

Insertar CODE, HTML o PHP:

.tuclass {
width:100%;
}

O con media queries, pero especificando un ancho determinado, algo como;

Insertar CODE, HTML o PHP:

@ media only screen and (max-width: Xpx) {
.tuclass {
width:X%;
}
}

Donde X es el valor que veas conveniente. Esto sería, si por ej. deseas que el video no ocupe toda la pantalla, para añadir otra cosa. Asegurate de eliminar del iframe el width y el height. El @ no va separado, pero en el foro me lo toma como mención.

Andres128 · 21 Mar 2019

Con esto basta y sobra:

iframe{width:100%}

o con una clase custom

.video-player{
width:100%;
}

O si deseas solo en movil el efecto

PHP:

@media(max-width:600px){iframe{width:100%}}

allistar19 · 21 Mar 2019

Muchas gracias. Voy a probar de las 2 formas que me habeis dicho para ver que tal sale.

Optimiza el CSS de vídeos en iFrame para móviles en WordPress

allistar19

memeringo

allistar19

Mask7OfDragon

Cicklow

memeringo

allistar19

memeringo

allistar19

memeringo

allistar19

memeringo

Andres128

allistar19

Privacidad y transparencia

Privacidad y transparencia