0

Mi duda es parecida a esta y esta otra y aún así intento aplicar los conceptos y no me da resultado.

Estoy intentando que al abrir un popup con un video este quede al 100% de la anchura máxima, para que se acople a todos los dispositivos, ya que en el móvil se ve mal proporcionado.

Siguiendo mi intuición y lo que he encontrado, solo debo agregar width="100%" height="100%" al video, pero al hacerlo solo se ve aplicado la anchura, mas no la altura.

<iframe src="https://drive.google.com/file/d/1o7bQNB6WZUbc3rBb_TM6zmFDZtLb8W1w/preview" width="100%" height="100%" frameborder="0"></iframe>

¿Creo que tal vez debo modificar el código de la plantilla?, ya que no encuentro cuales son los elementos superiores al iframe, porque en la entrada de wordpress no aparece código que pueda modificar, solo deja agregar más desde un espacio en blanco, así https://ibb.co/zQnRSDQ

El plugin de wordpress que estoy utilizando para el popup no permite muchas opciones para modificar esto. Un colega me ha dicho que podría agregar un poco de CSS:

.paoc-popup-modal {
    width: 100%;
}
.paoc-popup-modal-cnt {
    width: 100%;
} 

En la entrada del post en wordpress, sin embargo no tengo idea cómo hacerlo ni dónde colocarlo.

¿Debo modificar las plantillas del theme de Wordpress o con colocar algo de código en la entrada bastaría?

Gracias.

2 respuestas 2

1

Los iframes por defecto no suelen ser responsive, por lo que agregar un width del 100% o un height del 100% no hará que ocupe ese espacio, sin embargo hay formas de hacerlo, prueba con lo siguiente.

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.embed-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
<div class="embed-container">
    <iframe src="https://drive.google.com/file/d/1o7bQNB6WZUbc3rBb_TM6zmFDZtLb8W1w/preview"frameborder="0"></iframe>
</div>

Esto lo que hace es dar un aspect radio al iframe, posicionándolo de forma absoluta al contenedor y se le da una altura de cero y un padding-bottom en porcentaje en función del aspect ratio.

Con esto deberías de poder darle un tamaño máximo al iframe junto con un height proporcional y dinámico.

Puedes agregar el css en Apariencia -> Personalizar -> Css Adicional

1

@Juan en el menu de wordpress en la parte de personalizar hay un apartado que dice css, ahi puedes agregar todo el apartado de estilos que requieras. Te recomiendo que intentes ponerle important a tus estilos ya que por lo general pueden estar chocando los estilo que ya tiene el plugin con los que estas intentando poner. Saludos

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.