0
168
ViewsCómo hacer que la ventana gráfica sea más grande
Estoy tratando de hacer que un video se reproduzca automáticamente (iframe) cuando está en la ventana gráfica. El problema ahora es que el video debe ser grande, por lo que para que esté en la ventana gráfica, es casi imposible que un usuario se desplace a la sección, por lo que el video está en el centro...
Me pregunto cómo podría resolver eso, si tienes alguna idea, házmelo saber.
Estoy pensando en las funciones que devuelve si un elemento está en la ventana gráfica que se ve así:
¿Quizás pueda agrandar la ventana gráfica?
1 answers
Answer question0
Bueno, soy yo otra vez. He resuelto esto con un pequeño "truco".
En mi html, agregué un elemento de posición absoluta que está detrás del iframe y no tiene contenido. Dado que este es un elemento muy pequeño, es más rápido en la ventana gráfica y el video comienza a reproducirse, aunque el video no esté completamente en la ventana gráfica.
No estoy seguro si esta fue la mejor solución, pero funcionó para mí :)
html
<div class="js-viewport c-video-slider__viewport"></div>CSS
.c-video-slider__viewport {position: absolute; top 45%;}JS
var vp = document.querySelector(".js-viewport"); if (this.isInViewport(vp) != false) {...} isInViewport(el) { const rect = el.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); }