javascript - pantalla - iframe responsive wordpress

Permitir que un iframe se convierta en pantalla completa, navegador cruzado

Question

Tengo un código que uso para mostrar un video dentro de un iframe. 99% del tiempo si funciona cuando el usuario desea cambiar a pantalla completa, en cualquier navegador.

Sin embargo, hemos encontrado un par de ejemplos en IE donde la opción de pantalla completa solo se expande para ajustarse al tamaño del iframe.

La etiqueta iframe se representa de la siguiente manera:

<iframe id="FrameContent" allowtransparency="true" frameborder="0" title="" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" src="/whatever.aspx" style="width: 1660px; height: 867px; visibility: visible;"></iframe>

Todos los iframes parentales / secundarios tienen los atributos allowfullscreen anteriores.

Sin embargo, al leer aquí y en otros lugares, parece que el consenso es usar allowfullscreen solamente, con ="true" especificado. Algunos el código anterior se cambiaría para que se procesara de la siguiente manera:

<iframe id="FrameContent" allowtransparency="true" frameborder="0" title="" allowfullscreen src="/whatever.aspx" style="width: 1660px; height: 867px; visibility: visible;"></iframe>

Además, los otros (webkitallowfullscreen & mozallowfullscreen) parecen haber quedado en desuso por lo que ya no se necesitan, ¿es correcto?

He visto otras sugerencias, como el uso de allowfullscreen="allowfullscreen" o allowfullscreen="" (porque ="true" no funciona!)

También he visto msallowfullscreen y oallowfullscreen mencionados, y actualmente no los utilizamos.

¿Alguien puede aclarar qué se debe usar de una vez por todas?

Answer 1

Aquí hay algunos enlaces, que pueden serle útiles. Para "aclarar qué se debe usar de una vez por todas", consulte el enlace de W3.org.

1. Las especificaciones oficiales de lo que los fabricantes de navegadores deben incorporar a la etiqueta iframe se encuentran en el sitio web del W3C: https://www.w3.org/TR/html5/embedded-content-0.html#the-iframe-element
2. Dado que la página W3C es algo difícil de leer, aquí hay una lista fácil de leer de propiedades iframe: http://www.w3schools.com/tags/tag_iframe.asp
3. Esto es lo que funciona en cada navegador: http://caniuse.com/#search=iframe

Parece que los fabricantes de navegadores están agregando atributos que no son compatibles con W3C en algunas de sus etiquetas. El atributo "allowFullScreen" realmente pertenece en una etiqueta param, pero no en el iframe ni en las etiquetas de video.

<object type="application/x-shockwave-flash">
<param name=allowfullscreen value=true>
<video>...</video>
</object>

Puede que no tenga suerte con IE, ya que parece que los fabricantes de navegadores están creando hacks ... en lugar de apegarse a las especificaciones oficiales de W3C. Cualquier otro atributo es opcional y puede ser desaprobado en cualquier momento.

Si desea mostrar el video, intente compilarlo en la página sin la etiqueta iframe. La mayoría de las compañías respetables de servicios de video no crearán videos que rompan el navegador. Son los anuncios los que pueden causar problemas con la superposición de contenido en su página. Supongo que ese es el problema que intentas evitar con la etiqueta iframe.