{"id":21803,"date":"2026-01-25T20:48:21","date_gmt":"2026-01-25T20:48:21","guid":{"rendered":"https:\/\/johnjohnston.info\/blog\/?p=21803"},"modified":"2026-01-25T20:54:42","modified_gmt":"2026-01-25T20:54:42","slug":"til-you-can-blend-youtube-videos-with-background","status":"publish","type":"post","link":"https:\/\/johnjohnston.info\/blog\/til-you-can-blend-youtube-videos-with-background\/","title":{"rendered":"TIL you can blend YouTube Videos with background."},"content":{"rendered":"\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" scrolling=\"no\" frameborder=0 src=\"https:\/\/pi.johnj.info\/moths-frame.html\"><\/iframe>\n\n\n\n<pre class=\"wp-block-code\"><code>iframe{margin:0px;mix-blend-mode: screen; \/* Blend mode to make black transparent *\/}<\/code><\/pre>\n\n\n\n<p>The other day I was exploring Are.na and saw a <a href=\"(https:\/\/www.are.na\/block\/4330591\">lovely gif<\/a>. I&#8217;ve been thinking about the animations created by Ade that are quite analogue and wonder-filled, <a href=\"https:\/\/ade3.substack.com\/p\/a-new-chapter-in-the-algorithm-wars\">example<\/a>. I had thought about some sort of JavaScript &amp; css version the would show a transparent gif over a slideshow of images. I&#8217;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.<\/p>\n\n\n\n<p>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&#8217;t turn up anything useful except a Pinterest link to <a href=\"https:\/\/www.youtube.com\/watch?v=8nGXTqtCnEE\">a YouTube video<\/a>. This must have been the source of the gif.<\/p>\n\n\n\n<p>In my testing I&#8217;d used the css <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/mix-blend-mode\">mix-blend-mode<\/a> 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.<\/p>\n\n\n\n<p>Compare with <a href=\"https:\/\/www.youtube.com\/watch?v=8nGXTqtCnEE\">the original video<\/a> &amp; with the background on a separate page: <a href=\"https:\/\/pi.johnj.info\/moths.html\">Transparent Youtube<\/a>.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The other day I was exploring Are.na and saw a lovely gif. I&#8217;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 &amp; css version the would show a transparent gif over a slideshow of images. I&#8217;d tried a few but [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"mf2_syndication":["https:\/\/bsky.app\/profile\/johnjohnston.info\/post\/3mdbm3wscwg2h","https:\/\/social.ds106.us\/@johnjohnston\/115957702183783058"],"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":true,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"webmentions_disabled_pings":false,"webmentions_disabled":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[953],"tags":[79,80,110],"post_format":[],"class_list":{"0":"post-21803","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-posse","7":"tag-css","8":"tag-fun","9":"tag-youtube","10":"kind-article","12":"h-entry","13":"hentry"},"better_featured_image":null,"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p57zFQ-5FF","jetpack_likes_enabled":false,"jetpack_sharing_enabled":true,"kind":false,"_links":{"self":[{"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/posts\/21803","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/comments?post=21803"}],"version-history":[{"count":5,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/posts\/21803\/revisions"}],"predecessor-version":[{"id":21808,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/posts\/21803\/revisions\/21808"}],"wp:attachment":[{"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/media?parent=21803"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/categories?post=21803"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/tags?post=21803"},{"taxonomy":"post_format","embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/post_format?post=21803"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}