this is the code:

<div class="mask1">

 <video id="slowMotionVideo" width="700" loop autoplay muted>
            <source src="flames-video.mp4" type="video/mp4">
            Your browser does not support HTML5 video.
        </video>
</div>
<div class="mask2">
        <!-- <img src="flames.jpg" alt="Mo fire" width="600" height="400"> -->
        <video id="slowMotionVideo" width="700" loop autoplay muted>
            <source src="flames-video.mp4" type="video/mp4">
            Your browser does not support HTML5 video.
        </video>
    </div>

.mask1 {
    -webkit-mask-image: url(catTwo.png);
    mask-image: url(catTwo.png);
    mask-repeat: no-repeat;
    mask-size: 300px 300px;
    width: 400px;
}

.mask2 {
    -webkit-mask-image: url(catTwo.png);
    mask-image: url(catTwo.png);
    mask-repeat: no-repeat;
    mask-size: 300px 300px;
    transform: scaleX(-1);
    width: 400px;
    /* Mirror-invert the element horizontally */
}

As it is now, we have two mask with two instances of the same video, but I want one video with two masks. Can I do that? To use multiple masks on one video, where I can place several masks within the video and also have control over where to place the mask. Like the first mask in the upper right corner, the second one in the lower left corner etc... Thx for answers P.S: To elaborate this a bit further further, what I want to achieve: Lets say we have a horse running through the video from left to right. We have two masks, a star and a circle, placed in the same video. The star is on the left and the circle is on the right. First the horse should be seen in the star on the left, then in the circle. I hope you understand what I'm getting at ;)