iframe{margin:0px;mix-blend-mode: screen; /* Blend mode to make black transparent */}The other day I was exploring Are.na and saw a lovely gif. I’ve been thinking about the animations created by Ade that are quite analogue and wonder-filled, example. I had thought about some sort of JavaScript & css version the would show a transparent gif over a slideshow of images. I’d tried a few but none looked very nice. This new gif looked amazing and I downloaded it and incorporated it a file I was testing. It looked a lot better than my other efforts.
Thinking to publish this experiment, I started trying to find the original to see how it was licensed. Are.na has a nice feature where you can pass an image to a Google search. This didn’t turn up anything useful except a Pinterest link to a YouTube video. This must have been the source of the gif.
In my testing I’d used the css mix-blend-mode to make the black areas of the gif transparent, so I wondered about the video. Turns out if you target the iframe that is YouTube video embed code that works too. The image behind swaps out every 3 seconds.
Compare with the original video & with the background on a separate page: Transparent Youtube.