Solución:
Para su caso de uso, no creo que pueda usar solo css.
Por lo general, agregamos formato de pantalla ancha o de pilar alrededor de los iframes de video para mantener la altura y el ancho en una cierta proporción para la presentación. Pero en ese caso, los bordes negros serían tan simples como un fondo css.
Para mantener las cosas receptivas, establecería la altura en algo como cero (como lo ha hecho) y usaría el truco de relleno para mantener la relación de aspecto del video (en este caso, un video de 16: 9; 9/16 * 100 = 56.25% ). Ese número sería su valor de padding-top o padding bottom. Dado que el relleno se mide con porcentaje, esto escala el relleno en relación con el ancho, manteniendo la proporción correcta sin importar el ancho al que se le asigne el tamaño del video.
En su caso, este video en realidad tiene el formato de pantalla ancha en el video real que puede ver desde la fuente de la etiqueta de video dentro del iframe. No estoy seguro de por qué tienes el padding-top:30 pero eso hace que los bordes negros sean aún más grandes. Sin embargo, necesitará piratear su situación aún más debido al buzón incorporado. Reuní una demostración de jsfiddle aquí que incluye algunos comentarios, pero usa JS para lograr lo que estás buscando.
El concepto del código es el siguiente:
- Quieres que el contenedor exterior recorte la parte superior e inferior del video. Suponiendo que desea que el video responda y esté recortado, siempre debe hacer que el video real sea más grande que el contenedor externo que lo enmascara.
- El video debe moverse hacia arriba en relación con el ancho del video en comparación con el grosor del borde superior
- Querrá reducir un poco la altura del contenedor exterior para compensar el margen superior negativo y aún así ocultar la parte inferior del video.
Personalmente, no me gusta hacer costosas operaciones DOM en el cambio de tamaño, que tal vez sea la razón por la que solicitó únicamente css, pero FWIW, tiene la demostración.
Idealmente, su mejor opción sería volver a grabar el video sin el formato de pantalla ancha, por lo que todo lo que necesitaría es el truco de relleno.
Corta el 1px de todos los bordes con CSS:
.embed-container {
position: relative;
padding-bottom: 43%; /* Aspect ratio of the video */
height: 0;
overflow: hidden;
max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: -1px;
left: -1px;
width: calc(100% + 2px);
height: calc(100% + 2px);
}
HTML:
<div class="js-video [vimeo, widescreen]">
</div>
CSS:
.js-video {
height: 0;
padding-top: 25px;
padding-bottom: 67.5%;
margin-bottom: 10px;
position: relative;
overflow: hidden;
}
.js-video.widescreen {
padding-bottom: 57.25%;
}
.js-video.vimeo {
padding-top: 0;
}
.js-video embed, .js-video iframe, .js-video object, .js-video video {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}
Encontrarás más detalles aquí.