JSFiddle - React, Tailwind, and code Playground

by Lore ZZ

HTML

<div id="video-container">
    <video width="320" height="240" src="http://www.w3schools.com/html/movie.ogg" type="video/ogg" controls></video>
    <div id="overlay"></div>
</div>

CSS

#video-container { position: relative; }

#overlay {
    position: absolute;
    width: 320px;
    height: 240px;
    left: 0;
    top: 0;
    pointer-events: none;
	background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" height="8" width="8"><g transform="translate(0,-972.36218)"><path fill="#fff" d="m0,972.36c4.4183,0,8,3.5817,8,8v-8h-8z"/></g></svg>'),
        url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" height="8" width="8"><g transform="translate(0,-972.36218)"><path fill="#fff" d="m0,980.36c0-4.4183,3.5817-8,8-8h-8v8z"/></g></svg>'),
        url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" height="8" width="8"><g transform="translate(0,-972.36218)"><path fill="#fff" d="m8,980.36c-4.4183,0-8-3.5817-8-8v8h8z"/></g></svg>'),
        url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" height="8" width="8"><g transform="translate(0,-972.36218)"><path fill="#fff" d="m8,972.36c0,4.4183-3.5817,8-8,8h8v-8z"/></g></svg>');
	background-position: top right, top left, bottom left, bottom right;
	background-repeat: no-repeat;
}