Comentario: Cuando codifiqué el tema Elemin (un sitio receptivo que diseñé recientemente), uno de los omitidos de marco que encontré fue cómo hacer que los videos incrustados sean más flexibles en cambios en el tamaño; A través de horas de búsqueda de datos y experimentos, finalmente encontré una solución
Cuando codicé el tema Elemin (un sitio receptivo que diseñé recientemente), uno de los omitidos de marco que encontré fue cómo hacer que los videos incrustados sean más flexibles en cambios en el tamaño. Uso de Max-Width: 100% y altura: Auto puede hacer que la etiqueta de video HTML5 funcione bien, pero esta solución no funciona con código en línea para iframe u etiquetas de objetos. Después de varias horas de buscar datos y experimentos, finalmente encontré una solución. Esta técnica CSS es útil cuando está haciendo un diseño receptivo.
Etiqueta de video html5 flexible
Usando el video de HTML5, puede hacerlo flexible configurando el ancho máximo: 100%. En la introducción anterior, se ha mencionado que no es aplicable a iframes comúnmente utilizados y códigos integrados en objetos.
video {
Máxido: 100%;
Altura: Auto;
}
Videos de objeto flexible e iframe incrustados
Este truco es bastante simple, debe agregar un contenedor <div> al video y establecer el valor de la propiedad del fondo del Div entre 50% y 60%. Luego establezca el ancho y la altura del elemento infantil (iFame u objeto) al 100%, y use el posicionamiento absoluto. Esto obliga al objeto incrustado a expandirse automáticamente al máximo.
CSS
.video-continer {
Posición: relativo;
Botón de relleno: 56.25%;
Top-top: 30px;
Altura: 0;
desbordamiento: oculto;
}
.video-continer iframe,
.
.video-contenedor incrustar {
Posición: Absoluto;
arriba: 0;
Izquierda: 0;
Ancho: 100%;
Altura: 100%;
}
Html
<div>
<iframe src = "http://player.vimeo.com/video/6284199??title=0&byline=0&portrait=0" frameborder = "0"> </iframe>
</div>
Lograr flexibilidad en un ancho fijo
Si el ancho del video es limitado, necesitamos un contenedor adicional <Div> para envolver el video y establecer un ancho fijo y un ancho máximo: 100% para el Div.
CSS
.video-wrapper {
Ancho: 600px;
Máxido: 100%;
}
Html
<div>
<div>
<iframe src = "http://player.vimeo.com/video/6284199??title=0&byline=0&portrait=0" frameborder = "0"> </iframe>
</div>
<!- /video->
</div>
<!- /video-wrapper->
compatibilidad
Este truco admite todos los navegadores, incluidos: Chrome, Safari, Firefox, Internet Explorer, Opera, iPhone y iPad.