Posts

Showing posts with the label html5

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...
-
Read more

Change img src on click jquery

Image
Change img src on click jquery I have a gallery of images, when I click one of the gallery items a popup window shows up, each item has a different image src. I'd like to make this gallery dynamic so when the user click on an item, the image of the corresponding item should show in the popup window. I hope this doesn't sound confusing, here's an image to illustrate what I'm trying to say: And the HTML: <div class="gallery__flex"> <div class="gallery__item"> <img src="img/gallery-1.jpeg" alt="" class="gallery__img"> </div> <div class="gallery__item"> <img src="img/gallery-2.jpeg" alt="" class="gallery__img"> </div> <div class="gallery__item"> <img src="img/gallery-3.jpeg" alt="" class="gallery__img"> </div> ...
-
Read more

How do I stop form overlapping header from scrolling?

How do I stop form overlapping header from scrolling? Hello I am working on a site that needs a form overlapping the header like this: Site example. So far In my rough draft I was able to make the form overlap the header, but it moves down when i scroll the page. I have attached pictures before and after the scroll as well as my code. Before scroll: before scroll After scroll after scroll html/css:code <head></head> <head></head> By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
-
Read more