- Este debate tiene 3 respuestas, 2 mensajes y ha sido actualizado por última vez el hace 3 meses por
.
-
Entradas
-
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
JavierHola 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
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
JavierSiguiendo 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>
<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>
- Debes estar registrado para responder a este debate.
