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

  • Autor Autor allistar19
  • Fecha de inicio Fecha de inicio
allistar19

allistar19

Gamma
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
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.
 
[MENTION=77245]allistar19[/MENTION], saludos.

¿Podrías pasar una captura? Para saber como luce.
 
memeringo dijo:
[MENTION=77245]allistar19[/MENTION], saludos.

¿Podrías pasar una captura? Para saber como luce.
Hacer clic para expandir...

css.webp

Asi es como se ve desde movil.
 
allistar19 dijo:
Ver el archivo adjunto 133632

Asi es como se ve desde movil.
Hacer clic para expandir...

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 dijo:
Eso es un player HTML5 normal, verdad?

Eso se podría hacer con media querys, jugando con el webview.
Hacer clic para expandir...

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>
 
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>
Hacer clic para expandir...

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.
 
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.
Hacer clic para expandir...

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.
 
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.
Hacer clic para expandir...

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...
 
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...
Hacer clic para expandir...

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.
 
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.
Hacer clic para expandir...

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.
 
Última edición:
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%}}
 
Muchas gracias. Voy a probar de las 2 formas que me habeis dicho para ver que tal sale.
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba