Rectangle SVG Masking over video tag - html

Question

I am trying to create a Mask over video tag.
I have below svg element which has transparent text but I am looking to have a rectangle shape instead of text.
I have also tried with polygon to create a rectangle but seems its not working.
<polygon points="0 0,0 100,300 100,300 0" fill="orange" />
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 285 80" preserveAspectRatio="xMidYMid slice">
<defs>
<mask id="mask" x="0" y="0" width="100%" height="100%" >
<rect x="0" y="0" width="100%" height="100%" />
<text x="72" y="50">OCEAN</text>
</mask>
</defs>
<rect x="0" y="0" width="100%" height="100%" />
</svg>
svg {
width: 100%;
position:absolute;
top: 0;
left: 0; // needed for FF, Safari, Edge
height: 100%;
}
svg text {
font-family: Biko, sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 38px;
}
svg rect {
fill: white;
}
svg > rect {
-webkit-mask: url(#mask);
mask: url(#mask);
-webkit-mask-mode: alpha;
mask-mode: alpha;
fill: black;
fill-opacity:0.8;
}

Answer 1

Was able to achieve using another rect element inside mask.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 285 80" preserveAspectRatio="xMidYMid slice">
<defs>
<mask id="mask" x="0" y="0" width="100%" height="100%" >
<rect id="svg-rect" x="0" y="0" width="100%" height="100%" />
<rect x="100" y="10" rx="5" ry="5" width="60" height="30"/>
</mask>
</defs>
<rect x="0" y="0" width="100%" height="100%" />
</svg>