Unable to round corners
Unanswered
ByteWizard posted this in #help-forum
I am using next-video but unable to round corners of video how to do it?
49 Replies
<div className="w-full rounded-md overflow-hidden relative aspect-video">
<div className="absolute inset-0 w-full h-full rounded-md overflow-hidden pointer-events-none">
<Video
src={heroVideo}
autoPlay
loop
controls={false}
className="w-full h-full object-cover"
style={{ width: "100%", height: "100%", objectFit: "cover" }}
/>
</div>
</div>I tried this
But video corners are not getting round
@ByteWizard tsx
<div className="w-full rounded-md overflow-hidden relative aspect-video">
<div className="absolute inset-0 w-full h-full rounded-md overflow-hidden pointer-events-none">
<Video
src={heroVideo}
autoPlay
loop
controls={false}
className="w-full h-full object-cover"
style={{ width: "100%", height: "100%", objectFit: "cover" }}
/>
</div>
</div>
For these types of issue, using inspect is the best thing you can do
its rendering video component
I am applying css to it but not working
@ByteWizard tsx
<div className="w-full rounded-md overflow-hidden relative aspect-video">
<div className="absolute inset-0 w-full h-full rounded-md overflow-hidden pointer-events-none">
<Video
src={heroVideo}
autoPlay
loop
controls={false}
className="w-full h-full object-cover"
style={{ width: "100%", height: "100%", objectFit: "cover" }}
/>
</div>
</div>
So basically I can’t debug this issue unless i get a live preview, devtools make it faster to debug
@Anay-208 | Ping in replies So basically I can’t debug this issue unless i get a live preview, devtools make it faster to debug
Wait a min
Can i just forward my port to tunnel and show it?
Can i just forward my port to tunnel and show it?
checking
yeah
Which image are you referring to
in background
yeah this
i want it to be rounded
yeah
how do i remove it
its by default
@ByteWizard how do i remove it
That seems to be in the video itself
@Anay-208 | Ping in replies That seems to be in the video itself
i did this
<div className="w-full rounded-md overflow-hidden relative aspect-video">
<div className="absolute inset-0 w-full h-full rounded-md overflow-hidden pointer-events-none">
<Video
src={heroVideo}
autoPlay
loop
controls={false}
className="w-full h-full object-cover"
style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: "5rem", alignContent: "space-between" }}
/>
</div>
</div>style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: "5rem", alignContent: "space-between" }}
changed this line
corners are round from upside
from down its not
what is making here margin?
The video has a margin
Can you send the video once
video is ok
Wait @ByteWizard try removing height property
width*
its just <Video /> component who is making margin
@Anay-208 | Ping in replies with width unchecked, it works fine
Try removing width related classes
how do i override it
You’ve a class of w full here on video
@Anay-208 | Ping in replies Here
i removed it still not worked
<div className="aspect-video rounded-md overflow-hidden relative bg-black">
<Video
src={heroVideo}
autoPlay
loop
controls={false}
muted
playsInline
/>
</div>ig i need to make changes in global css