CSS - Избегайте черных областей в видео 1: 1 - PullRequest
Новая
       12

CSS - Избегайте черных областей в видео 1: 1

0 голосов
/ 19 декабря 2018

У меня есть видео в квадрате (масштаб 1: 1), и я хочу разместить его в середине экрана.

Моя первая и самая большая проблема заключается в том, что с тегом <video> проигрыватель вставляет 2черная область с обеих сторон.Как я могу избежать этой вещи?

enter image description here

<div style="width: 400px; height: 400px; background-color: red;">
        <video>
        <source src="~/Content/video/FreeBirdConstruction.mp4" type="video/mp4">
    </video>
</div>

Элемент, содержащий его, возводится в квадрат (400px x 400px), так почему видео неЗаполните?Я также пытался использовать VideoJS, но это не решило мою проблему.

Вопрос в формате Secondo.Если я попытаюсь переместить div в середине экрана, например, следующим образом: 

position: absolute; /*it can be fixed too*/
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
overflow: auto;

сначала div появится в середине экрана, но сразу исчезнет.

Не могли бы вы помочь мне решить эту проблему?Заранее спасибо.

1 Ответ

0 голосов
/ 19 декабря 2018

Я бы предложил установить высоту и ширину видео в теге video: 

<div style="background-color: red;">
    <video width="400" height="400">
        <source src="~/Content/video/FreeBirdConstruction.mp4" type="video/mp4">
    </video>
</div>

Я бы подумал, что это заставит его оставаться квадратным.

Чтобы центрировать ваш divДолжно быть, это путает.Вы задали ему конкретную ширину / высоту, но также хотите, чтобы ограничивающие края элемента div касались всех углов вашего экрана.Попробуйте что-то вроде этого (и удалите CSS, который вы дали (слева, справа, сверху и т. Д.): 

div{
    display:inline-block; /*this will keep the div the size of it's contents*/
    margin:auto; /*this should give it equal margins on all sides, thus centering*/
}
...