Iframe responsivo
Publicado por Ángel (2 intervenciones) el 02/12/2019 16:28:33
Estoy en un pequeño proyecto y la verdad es que me he quedado estancado justo en uno de los pasos finales y no se por donde tirar. Escribo esto para ver si alguien se le ocurre una solución que pueda hacer.
Os pongo en situación. Tengo una página donde se van a subir videos y se van a incrustar en ella con la etiqueta <iframe> (es obligatorio ya que los videos estan subidos a una plataforma que me los devuelve así, y no puedo usar etiqueta <video>).
la etiqueta tendría esta estructura:
El contenido de la página se ve bien desde navegadores de escritorio ya que el width y el height son pequeños para la resolución de los monitores, pero el problema viene con dispositivos móviles. Al visualizarlo con un navegador móvil el video es mas grande que la pantalla y se ve cortado (el cuadro de iframe es mas pequeño que el video en si). Lo primero que se me ocurrió es cambiar los valores que he puesto en negrita por "auto" o "100%", pero no funciona, ya que al final el video coge las dimensiones que estan puestas en la url del src. Tampoco puedo dejarlo vacio o quitar esa parte de la url.
Buscando una solución por internet di con un método que era meter el iframe dentro de un div y con CSS meterle un estilo para que fuera responsivo, pero no funciona, por algún motivo el cuadro <iframe> se acorta pero el video sigue siendo grande. Es como si, ponga lo que ponga, el video coge los valores de width y height del src independientemente de lo que haya aparte. También he probado a cambiar los valores de la url pero al parecer solo acepta valores numéricos en pixeles, al poner otra cosa el video se "rompe".
Después de todo este tocho, se os ocurre algún método para redimensionar y hacer responsivo el dichoso iframe?
Os pongo en situación. Tengo una página donde se van a subir videos y se van a incrustar en ella con la etiqueta <iframe> (es obligatorio ya que los videos estan subidos a una plataforma que me los devuelve así, y no puedo usar etiqueta <video>).
la etiqueta tendría esta estructura:
1
<iframe src="//dominio.com/v/XXXXXXX/width-400/height-300/" width="400" height="300" frameborder="0" scrolling="no" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
El contenido de la página se ve bien desde navegadores de escritorio ya que el width y el height son pequeños para la resolución de los monitores, pero el problema viene con dispositivos móviles. Al visualizarlo con un navegador móvil el video es mas grande que la pantalla y se ve cortado (el cuadro de iframe es mas pequeño que el video en si). Lo primero que se me ocurrió es cambiar los valores que he puesto en negrita por "auto" o "100%", pero no funciona, ya que al final el video coge las dimensiones que estan puestas en la url del src. Tampoco puedo dejarlo vacio o quitar esa parte de la url.
Buscando una solución por internet di con un método que era meter el iframe dentro de un div y con CSS meterle un estilo para que fuera responsivo, pero no funciona, por algún motivo el cuadro <iframe> se acorta pero el video sigue siendo grande. Es como si, ponga lo que ponga, el video coge los valores de width y height del src independientemente de lo que haya aparte. También he probado a cambiar los valores de la url pero al parecer solo acepta valores numéricos en pixeles, al poner otra cosa el video se "rompe".
Después de todo este tocho, se os ocurre algún método para redimensionar y hacer responsivo el dichoso iframe?
Valora esta pregunta
0