Как добавить стилей для тега video, которые используются для тега img?

Question

[Александр Венгер]

Добрый день!
Взял лендинг, чтобы подредактировать под себя и на нем было 3 gif'ки внутри тега img
Гифки много места занимают и влияют на скорость загрузки страницы, поэтому я решил поменять их на webM (знаю что не во всех броузах поддерживается этот формат).
Поменять решил по простому - изменил тег img на тег video, прописал source и стало отобрадаться мое видео, криво правда, но ведь нет же стилей под тег video. Скопировал я стили c .a-card img и создал новый стиль.a-card video с теми же параметрами, но как было криво так и осталось мое видео
Подскажите плжалуйста что я делаю не так?

Comments

[alaskafx]

Привет, я бы для начала лично посмотрел на код, лучше выложи его сюда или куда-либо :)

[Александр Венгер]

Вот css (я искал по файлу .a-card img и создавал такой же но с video)

#s6 .a-card img {
    width: auto;
}
#s6 .a-card video {
    width: auto;

}#s8 .a-card img {
    width: auto;
}
#s8 .a-card video {
    width: auto;
}

.a-card img {
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    margin: 0 auto 24px;
}

.a-card video {
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    margin: 0 auto 24px;
}

а вот html (в нем я пока один тег img заменил на video)

<div class="row">
                <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4">
                    <div class="a-card">
                        <video>
                            <source src="img/s5-1.webm">
                        </video>
                        <p>01</p>
                        <span></span>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4">
                    <div class="a-card">
                        <img src="img/s5-2.gif" alt="">
                        <p>02</p>
                        <span></span>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4">
                    <div class="a-card">
                        <img src="img/s5-3.gif" alt="">
                        <p>03</p>
                        <span></span>
                    </div>
                </div>
            </div>

[Александр Венгер]

Нашел один косяк, но как исправить не пойму.
Тег видео уже используется и у него уже заданы длина и ширина

Скинул ссылку на полный код .css

[alaskafx]

Александр Венгер, А что именно хотелось сделать такими правками? Типа, как оно должно выглядеть?)
Просто, читаю несколько раз уже, ну и до сих пор не понимаю, что требовалось от кода)

[Александр Венгер]

alaskafx, я хотел просто заменить gif'ки на видео файлы, чтобы снизить скорость сайта, и вот поменял на видосы а теперь их норм вставить вместо гифок не могу, у гифок был тег img а у видосов video тег надо