How to make video responsive like Image component of react? - css

Question

I'm facing a strange problem while setting width and height of the video tag. I'm using Image component (from next/image), which is setting its height automatically.
It always shows height of 413px even if I use image with 150x150 dimensions. I'm not seeing any absolute height rule in CSS inspector even for parent elements or this Image component.
Actually it is the desired behavior (width/height) of the Image. I'm trying to do the same thing with the video tag. But it shrinks itself down to actual height of the video if video is smaller in height.
Video should not change it's height because it shares same CSS properties and has same container as Image. I'm also using object-fit:cover property.
Code for the component is:
import React, { useState } from 'react';
import Image from 'next/image';
import { IExclusiveCard } from '../../../typings/types';
import Link from 'next/link';
import useNFTMetadata from '../../../hooks/useNftMetaData';
import { BsFillPlayFill, BsPauseFill } from 'react-icons/bs';
const ExclusiveCard: React.FC<IExclusiveCard> = ({
id,
photo_name,
metadataUri,
cardInfo,
cardType,
cardInfoBg,
title,
desc,
collectionType,
asset_url,
thumbnail,
}) => {
let { data } = useNFTMetadata(metadataUri as string);
if (!metadataUri?.trim() && thumbnail && asset_url) {
data = {
asset_url,
thumbnail,
};
}
const [videoPaused, setVideoPaused] = useState(true);
let href = '';
if (collectionType === 'continuous') {
href = `/exclusives/${id}/auction`;
} else if (collectionType === 'editions') {
href = `/editions/${id}/mint`;
}
const image = data?.thumbnail || data?.image || photo_name;
const description = desc || data?.description || '';
return (
<Link href={href}>
<a className='h-full block'>
<div
className="token-card--items h-full w-[382px] md:w-full md:min-w-[216px] md:max-w-[216px] md:h-[317px] lg:w-[290px] laptop-x:w-[300px] laptop-m:w-[350px] desktop-m:w-[350px] rounded-3xl overflow-hidden bg-primary lg:rounded-2xl"
key={id}
>
<div className="token-img-cont-box h-full relative">
<div className="tokens-img-wrap h-full relative">
<div className="exclusive--card-img h-full w-full relative md:h-[317px]">
{/* If thumbnail exists, show video instead of an image */}
{!videoPaused && data?.asset_url ? (
<video
style={{
height: '100%',
objectFit: 'cover',
}}
src={data?.asset_url}
autoPlay
loop
muted
onEnded={() => setVideoPaused(true)}
/>
) :
image ? (
<Image
// src={image}
src={"https://picsum.photos/id/1/150/150"}
alt="tokens-card-img"
className="token-card-img h-full w-full object-cover"
width="382px"
height="520px"
/>
) : (
<div className="slim-nft-card-placeholder-bg rounded-[20px]"></div>
)}
</div>
<div className="tokens-card-top-cont flex justify-end items-start absolute top-0 left-0 p-5 w-full md:p-2">
<span
className={[
'card-updates-info text-fig-15 uppercase text-secondary block text-center font-primary font-normal rounded-[100%] w-[62px] h-[62px] leading-[62px] laptop-x:text-fig-12 laptop-x:w-[45px] laptop-x:h-[45px] laptop-x:leading-[45px] lg:w-[36px] lg:h-[36px] lg:text-fig-xs lg:leading-[36px]',
`bg-${cardInfoBg}`,
].join(' ')}
>
{cardInfo}
</span>
</div>
<div className="token-card-content-box pt-[13px] pb-4 px-6 absolute bottom-0 left-0 z-50 lg:px-4 w-full">
<h3 className="card-title font-primary font-normal text-fig-32 text-left text-secondary uppercase mb-4 laptop-x:text-fig-24 lg:text-fig-base lg:mb-2">
{title || data?.properties?.title}
</h3>
<p className="desc mb-8 text-fig-xs text-left text-secondary font-primary font-normal md:text-fig-xs md:mb-2">
{/* Truncate desc or data?.description if it is greater than 30 characters */}
{description.length > 50
? description.slice(0, 50) + '...'
: description}
</p>
<div
className={`token-cards-bottom flex ${
data?.thumbnail ? 'justify-between' : 'justify-end'
} w-full`}
>
{data?.thumbnail && (
<h3 className="card-type font-primary font-normal text-fig-32 text-right laptop-x:text-fig-24 text-white uppercase lg:text-fig-15 lg:mb-0">
{videoPaused ? (
<BsFillPlayFill
onClick={(ev) => {
ev.preventDefault();
setVideoPaused(false);
}}
className="text-4xl"
/>
) : (
<BsPauseFill
onClick={(ev) => {
ev.preventDefault();
setVideoPaused(true);
}}
className="text-4xl"
/>
)}
</h3>
)}
<h3 className="card-type font-primary font-normal text-fig-32 text-right laptop-x:text-fig-24 text-darkgray uppercase lg:text-fig-15 lg:mb-0">
{cardType}
</h3>
</div>
</div>
</div>
</div>
</div>
</a>
</Link>
);
};
export default ExclusiveCard;
I'm not sure what I'm missing here. What should I do to get same size of video like Image when I click play icon?