Is there a way to create a triangle display of a HTML video tag using CSS border-radius?

I am attempting to show a HTML video tag in a triangle display. So, as opposed to the default rectangle display; a triangle. Meaning, here's the default display:

<!DOCTYPE html>
<html>

<head>
  <title>Video Default</title>
</head>

<body>

  <video width="640" height="360" controls>
  <source src="https://durendel.com/event/theater/gravityphase.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

</body>

</html>

Notice how the default display is the rectangle form - my aim is to get the display in a triangle form - like this:

I am trying to use CSS to accomplish this task, specifically border-top-left radius and border-top-right-radius, but I can only get it to curve. Here's the code below:

video {
  border-top-left-radius: 200px;
  border-top-right-radius: 200px;
  overflow: hidden;
}

<!DOCTYPE html>
<html>

<head>
  <title>Video</title>
</head>

<body>

  <video width="640" height="360" controls>
    <source src="https://durendel.com/event/theater/gravityphase.mp4" type="video/mp4"> Your browser does not support the video tag.
    </video>

</body>

</html>

The problem I'm running into, as you can see from the code snippet above, the left and right angles only curve as opposed to forming a point. Therefore, is it possible to create a triangle display of a HTML video tag using CSS border-radius? Or can someone provide some additional guidance as to what I should be using to accomplish this task?

Solution

I doubt this is possible with border-radius.

But you can achieve this with clip-path

video {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

<!DOCTYPE html>
<html>

<head>
  <title>Video</title>
</head>

<body>

  <video width="640" height="360" controls>
    <source src="https://durendel.com/event/theater/gravityphase.mp4" type="video/mp4"> Your browser does not support the video tag.
    </video>

</body>

</html>