iframe de vídeo

Viendo 4 entradas - de la 1 a la 4 (de un total de 4)
  • Autor
    Entradas
  • #49325 Karma: 0
    Javier Escobar
    Participante
    9

    Buenas alguién sabe una buena manera de incluir un iframe de vídeo y que no baje mucho la velocidad de carga?

    He pensado retardar la carga y poner una foto chula con un botón de play para que pinches y salte el vídeo

    ¿Youtube va bien?

    Gracias
    Javier

    #49326 Karma: 0
    israel
    Participante
    22

    Hola Javier, puedes hacer una carga diferida (lazy load).

    Te dejo un código con un ejemplo:

    https://codepen.io/israelperez/pen/abrwENQ

    Es muy simple, puedes pedirle a ChatGPT que te lo modifique.

    Un saludo

    • Esta respuesta fue modificada hace 2 semanas por israel.
    • Esta respuesta fue modificada hace 2 semanas por israel.
    • Esta respuesta fue modificada hace 2 semanas por israel.
    #49334 Karma: 0
    Javier Escobar
    Participante
    9

    Buenas Israel gracias

    He añadido vídeo de vimeo para poder quitar todos los controles, etc

    Le he pedido a chat gpt de hacer para que en móviles se vea el video vertical pero no hay manera.
    Lleva media hora dándome códigos pero no funcionan.

    En escritorio magnífico pero en móviles se ve en horizontal y quiero que se vea en móviles

    Gracias
    Javier

    #49336 Karma: 0
    Javier Escobar
    Participante
    9

    Siguiendo con el ejemplo.

    Quiero mejorar 2 cosas.

    1. Que en la web no la altura sea menor para, ahora es demasiado grande. Lo que sucede es que si hago que la altura sea menor el vídeo no va de ancho a ancho. Previero bajar la altura y perder un poco de arriba y de abajo.

    2. En movil el vídeo quiero que se vea en vertical. A mi me sale en horizontal y quiero que salga más en vertical igual 4:5 Entiendo que se perderán los laterales pero quiero que tenga más altura y que salga el centro de los planos.

    <!DOCTYPE html>
    <html lang=»es»>
    <head>
    <meta charset=»UTF-8″>
    <meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
    <title>Carga diferida de video de Vimeo</title>
    <style>
    .video-container {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%; /* Relación de aspecto 16:9 */
    }
    .video-container img, .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    object-fit: cover; /* Ajustar para que ocupe todo el contenedor y cortar los laterales si es necesario */
    }
    .video-container iframe {
    display: none;
    }
    .video-container.loaded iframe {
    display: block;
    }
    .video-container.loaded img {
    display: none;
    }

    @media (max-width: 768px) { /* Ajustar para dispositivos móviles */
    .video-container {
    padding-bottom: 96.25%; /* Relación de aspecto 5:4 para móviles */
    }
    }
    </style>
    </head>
    <body>

    Video de Vimeo
    <iframe id=»vimeo-video» src=»» frameborder=»0″ allow=»autoplay; fullscreen» allowfullscreen></iframe>

    <script>
    function loadVideo() {
    var iframe = document.getElementById(‘vimeo-video’);
    var container = document.getElementById(‘video-container’);
    iframe.src = «https://player.vimeo.com/video/954825624?autoplay=1&controls=0&loop=1»;
    container.classList.add(‘loaded’);
    }
    </script>

    </body>
    </html>

    • Esta respuesta fue modificada hace 1 semana, 5 días por Javier Escobar.
    • Esta respuesta fue modificada hace 1 semana, 5 días por Javier Escobar.
    • Esta respuesta fue modificada hace 1 semana, 4 días por Javier Escobar.
Viendo 4 entradas - de la 1 a la 4 (de un total de 4)
  • Debes estar registrado para responder a este debate.