JSFiddle - React, Tailwind, and code Playground

HTML

<div class="corner-frame">
    <video controls>
        <source src="http://ia700204.us.archive.org/18/items/blue_shoes/blue_shoes.mp4" type="video/mp4">
        <source src="http://ia700204.us.archive.org/18/items/blue_shoes/blue_shoes-portable.ogv" type="video/ogg">
    </video>
    <div class="corner-top-left"></div>
    <div class="corner-top-right"></div>
    <div class="corner-bot-left"></div>
    <div class="corner-bot-right"></div>
</div>

CSS

video {
    width: 100%; /* set video to expand to the width of .corner-frame */
    height: auto;
}

.corner-frame {
    width: 100%; /* set the width here if you want to limit the size of the video, not on the video element itself */
    position: relative; /* set to relative to contain the absolute positioned corners within it. */
}

.corner-top-left, .corner-top-right, .corner-bot-left, .corner-bot-right {
    width: 10px; /* set width and height to only show one part of the sprite background at a time. */
    height: 10px;
    position: absolute; /* set to absolute to position them in the corners */
    background: url(http://i45.tinypic.com/5l520j.png) no-repeat; /* load sprite with all four corners */
    z-index: 1; /* set z-index higher number than zero to appear above the video */
}

/* position the sprite to show each corner of the image that includes all four corners */
.corner-top-left { top: 0; left: 0; background-position: 0 0 ; }
.corner-top-right { top: 0; right: 0; background-position: -10px 0 ; }
.corner-bot-left { bottom: 4px; left: 0; background-position: 0 -10px ; }
.corner-bot-right { bottom: 4px; right: 0; background-position: -10px -10px ; }