HTML-видео не заполняет родительский div

Я хочу, чтобы тег видео HTML заполнил мою карточку. Нравится:

<ion-card>
  <ion-card-header>
    <ion-card-title>Ion Videp</ion-card-title>
  </ion-card-header>
    <div class = "video-wrapper">
      <video #video controls = "controls" class = "video" autoplay = "autoplay">
        <source src = "../../../assets/push-ups.mp4" type = "video/mp4" />
      </video>
    </div>
</ion-card>

Но видео просто сохраняет исходный размер.

Я пробовал эти стили css:

.video-wrapper {
    position: relative;
    height: 200px;
}

.video {
    position: absolute; 
    right: 0; 
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
    width: auto; 
    height: auto; 
    z-index: -100;
    background-size: cover;
    overflow: hidden;
}

Но все равно не сработает.

Любые идеи?

Я ничего не знаю о iconic-framework, но объявление .video в вашем CSS не нацелено ни на что в вашей разметке, поскольку ни один из элементов не имеет класса video. Попробуйте применить класс видео к элементу видео.

— 12.10.2018 19:29

@Daniel ага, я забыл прикрепить класс после многих тестов. Но при присоединении класса проблема все еще существует

— 12.10.2018 19:51

javascript html ionic-framework

12.10.2018 17:29

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

191

Ответы 1

.video {
    position: absolute; 
    right: 0; 
    bottom: 0;
    min-width: 100vw; /* you can changes size*/
    min-height: 100vh;
    z-index: -100;
    background-size: cover;
    overflow: hidden;
}

Добавление некоторых пояснений делает ответ более полезным.

— 12.10.2018 20:21

Это тоже не работает. В любом случае, как это должно работать, если вы установили 100% экрана, не так ли? Я только хочу, чтобы видео заполнило div. Однако ценю помощь.

— 12.10.2018 20:41

12.10.2018 20:00