CSS iframe videos desde movil CSS iframe videos desde movil


Página 1 de 2 12 ÚltimoÚltimo
Mostrando resultados del 1 al 10 de 14
  1. #1
    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.

  2. #2
    Registro
    29-enero-2019
    Ubicación
    debajo de tu cama.
    Mensajes
    390
    allistar19, saludos.

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

  3. #3
    Cita Iniciado por memeringo Ver Mensaje
    allistar19, saludos.

    ¿Podrías pasar una captura? Para saber como luce.
    CSS iframe videos desde movil-css.png

    Asi es como se ve desde movil.
    Citar Citar  

  4. Cita Iniciado por allistar19 Ver Mensaje
    CSS iframe videos desde movil-css.png

    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.
    Citar Citar  

  5. #5
    Cita Iniciado por allistar19 Ver Mensaje
    CSS iframe videos desde movil-css.png

    Asi es como se ve desde movil.
    yo uso
    Código 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%
    Citar Citar  

  6. #6
    Registro
    29-enero-2019
    Ubicación
    debajo de tu cama.
    Mensajes
    390
    Cita Iniciado por allistar19 Ver Mensaje
    CSS iframe videos desde movil-css.png

    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.
    Citar Citar  

  7. #7
    Cita Iniciado por memeringo Ver Mensaje
    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>
    Citar Citar  

  8. #8
    Registro
    29-enero-2019
    Ubicación
    debajo de tu cama.
    Mensajes
    390
    Cita Iniciado por allistar19 Ver Mensaje
    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.
    Citar Citar  

  9. #9
    Cita Iniciado por memeringo Ver Mensaje
    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.
    Citar Citar  

  10. #10
    Registro
    29-enero-2019
    Ubicación
    debajo de tu cama.
    Mensajes
    390
    Cita Iniciado por allistar19 Ver Mensaje
    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...
    Citar Citar  

Página 1 de 2 12 ÚltimoÚltimo


Temas similares

  1. Tutorial: Crear videos para tu fanpage desde tu movil
    Como crear videos como los virales en facebook y mas redes Crear videos virales es una nueva tendencia que todos desean para mejorar el...
    Respuestas: 7
    Último mensaje: 12-dic-2017
  2. Por que no salen anuncios en mis vídeos de youtube desde el movil?
    Hola betas, tengo una duda sobre youtube, ya sabia que si ves un vídeo de youtube desde el movil prácticamente no salen anuncios, la cuestión es que...
    Respuestas: 3
    Último mensaje: 09-nov-2016
  3. Poner vídeos de YOUTUBE en webs con iframe afecta??
    Tengo entendido que los iframes ralentizan un poco la velocidad de la web y demás, la web metricspot los ve como un error en la validación W3C...
    Respuestas: 1
    Último mensaje: 11-feb-2015
  4. Como Desindexar mediant robots.txt iframe tipo page/10?iframe=true&width=80%&height=
    Buenas amigos, pues resulta que en algunos de mis blogs me sale esto: midominiii0o.com/page/10?iframe=true&width=80%&height=80% y tambien...
    Respuestas: 3
    Último mensaje: 18-mar-2014
  5. Reproducir vídeos desde el móvil
    Que tal amigos. Tengo un sitio XXX, usando el theme DeTube, con videos insertados de las paginas mas populares de este medio y estoy teniendo...
    Respuestas: 3
    Último mensaje: 05-ene-2014

Normas de publicación

  • No puedes crear nuevos temas
  • No puedes responder mensajes
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •