html - pagina - ¿Cómo hacer un video a pantalla completa cuando se coloca dentro de un iframe?
insertar video de youtube en html5 (4)
Aquí hay una solución de "pirateo" que incluso hará que su página se cargue más rápido.
1) Cree una imagen (generalmente una captura de pantalla del video) en lugar del iFrame.
2) Vincule un controlador de eventos de clic a la imagen para que cree un iFrame a las dimensiones que requiera. (Puede basar esas dimensiones en el tamaño de la ventana del cliente).
Estoy usando la configuración predeterminada para mi reproductor mediaelement.js, y mi inicialización es muy básica: $(''video'').mediaelementplayer();
Mi pregunta es: ¿es posible hacer una pantalla completa del reproductor cuando el video está incrustado en un iframe? Cuando presiono pantalla completa, el video maximiza al iframe pero no a toda la pantalla. ¿Es esto una limitación de html o hay una manera de evitarlo?
La estructura general se ve así:
<!DOCTYPE html>
<html>
<head />
<body>
<iframe>
<!DOCTYPE html>
<html>
<head />
<body>
*My Video Here <video> ...*
<body>
</html>
</iframe>
</body>
</html>
¡Gracias!
EDITAR: Parece que esto es específico del jugador. La implementación por defecto de html5 <video> maximiza a pantalla completa sin problemas, incluso dentro de un iframe.
Encontré esto en video.js:
video.js dentro de una ventana modal: pantalla completa no funciona
Y la respuesta es agregar estos atributos a iframe: <iframe … allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"> (aunque no es compatible con IE)
Mi cliente ya se había contentado con el ancho limitado de la ''pantalla completa'' del video: solo tenía que eliminar las barras negras arriba y abajo. (En mi caso las dimensiones del iFrame eran 945 × 1500).
Esto, podría arreglarlo simplemente con un poco de CSS.
.mejs-container-fullscreen {
background-color: #fff !important;
}
.mejs-container-fullscreen .mejs-mediaelement,
.mejs-container-fullscreen video {
height: 530px !important;
top: 500px !important;
}
.mejs-container.mejs-container-fullscreen .mejs-controls {
bottom: auto !important;
top: 1000px !important; /* video top + video height - controls height (30px) */
}
Es cierto que esta es una solución bastante limitada y depende en gran medida del tamaño del video (y la consistencia del tamaño para varios videos) así como del color de fondo. Pero también puede funcionar para usted.
Uso este bit de código para realizar un seguimiento de si un video ha entrado o salido del modo de pantalla completa:
MediaElementPlayer.prototype.enterFullScreen_org = MediaElementPlayer.prototype.enterFullScreen;
MediaElementPlayer.prototype.enterFullScreen = function() {
// Your code here
this.enterFullScreen_org();
}
MediaElementPlayer.prototype.exitFullScreen_org = MediaElementPlayer.prototype.exitFullScreen;
MediaElementPlayer.prototype.exitFullScreen = function() {
// Your code here
this.exitFullScreen_org();
}
¿Supongo que puede tener esta llamada una función en la página principal para ampliar el iframe?