Masks are useful tools when we need to hide part of some content; they are even more useful with videos because we can apply interesting effects that otherwise would require some dedicated software. There are several techniques we can employ to create a mask using HTML5/CSS3; however, support across browsers is inconsistent. In order to account for the inconsistencies, we will combine several techniques in our series.
To some small extent, we can use
border-radius to mask our video, thus:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Masking</title>
<style>
video{
border-radius: 300px;
}
</style>
</head>
<body>
<video autoplay muted loop>
<source src="video/sintel-trailer.mp4">
<source src="video/sintel-trailer.webm">
</video>
</body>
</html>As can you see, this method works with Firefox and IE, but for...