How to superimpose a canvas on an HTML5 video using object-fit cover?
How to superimpose a canvas on an HTML5 video using object-fit cover? I am refactoring this code: https://github.com/idevelop/predator-vision to superimpose heatmap on a video (with any resolution and aspect-ratio). I have the following html code: <div id="videos" class="embed-responsive"> <canvas id="heatmap" class="embed-responsive-item"></canvas> <video id="remote-video" autoplay muted playsinline class="embed-responsive-item"></video> </div> CSS: #remote-video { display: block; height: 100%; max-height: 100%; max-width: 100%; position: absolute; top: 0; left: 0; object-fit: cover; /* no letterboxing */ opacity: 1; -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); transition: opacity 1s; width: 100%; } #re...