{"id":328311,"date":"2020-12-08T07:47:11","date_gmt":"2020-12-08T15:47:11","guid":{"rendered":"https:\/\/css-tricks.com\/?p=328311"},"modified":"2020-12-08T07:47:13","modified_gmt":"2020-12-08T15:47:13","slug":"overlaying-video-with-transparency-while-wrangling-cross-browser-support","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/overlaying-video-with-transparency-while-wrangling-cross-browser-support\/","title":{"rendered":"Overlaying Video With Transparency While Wrangling Cross-Browser Support"},"content":{"rendered":"\n<p>As websites are becoming more and more dynamic when it comes to design, there is sometimes a need to incorporate complex, animated elements. There are many ways to do that from CSS transitions to 3D rendering on canvas, and animated SVG. But it is often easier to use a <code>&lt;video&gt;<\/code> since they can be rather efficient and, with them, just about anything visual is possible.<\/p>\n\n\n\n<p>But what if you a need transparent background on that video, so that it could overlay and appear to interact with other content on the page? It\u2019s possible, but can be tricky, especially cross-browser. Let\u2019s explore that.<\/p>\n\n\n\n<!--more-->\n\n\n<h3 class=\"wp-block-heading\" id=\"h-here-s-an-example\">Here\u2019s an example<\/h3>\n\n\n<p>To see how transparent video overlays work, I\u2019ve prepared an example that I hope feels both fun and relatable. The idea is to integrate video with interactive content underneath so that the content behind the video changes as the slider is advancing. It is a slider advertising dog food with a real video of a dog on the overlay and I\u2019m sure that realistic, cute dog would improve the conversion rate!<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_pobGVGK\" src=\"\/\/codepen.io\/anon\/embed\/pobGVGK?height=800&amp;theme-id=1&amp;slug-hash=pobGVGK&amp;default-tab=result\" height=\"800\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed pobGVGK\" title=\"CodePen Embed pobGVGK\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>You can follow along with this article to recreate this demo by yourself. Part of what you\u2019ll need to create a video like this is an &#8220;image sequence\u201d (a bunch of alpha-transparent images we\u2019ll stitch together into a video). I\u2019m providing the images I used for the example.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\" href=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2020\/12\/unscreen-pngs.zip\">Download images<\/a><\/div>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-exploring-possibilities\">Exploring possibilities<\/h3>\n\n\n<p>To achieve this effect, I started with a search for <em>a<\/em><em>ny kind of<\/em> solution that would allow me to insert animated content with transparent background on the page.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-gif\">GIF<\/h4>\n\n\n<p><strong>The first thing that came<\/strong> <strong>up<\/strong> <strong>was<\/strong> <strong>a GIF.<\/strong> Even though the GIF format was introduced over 30 years ago, it is still widely used. Unfortunately, it has its limitations. While it works perfectly for simple and small animated graphics, it is not that great for colorful, long video footage, it has limited color space, and will grow a lot in size for complex videos.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-apng\">APNG<\/h4>\n\n\n<p><strong>The next option<\/strong> <strong>I\u2019ve looked at<\/strong> <strong>was<\/strong> <strong>APNG<\/strong>, which for some reason, is not as popular as GIF but is much better. (I didn\u2019t even know it existed, did you?) APNG works similarly to animated GIF files while supporting 24-bit images and 8-bit transparency. It is also backward-compatible with regular PNG. If APNG is not supported, the first frame is displayed. It is supported by popular browsers, but no support in Internet Explorer 11 (yup, some people still have to support that). While it seemed like the way to go for a moment, I was not satisfied with its file size and performance.<\/p>\n\n\n\n<p class=\"explanation\"><strong>Fun fact:<\/strong> Apple adopted the APNG format as <a href=\"https:\/\/developer.apple.com\/design\/human-interface-guidelines\/ios\/extensions\/messaging\/\" rel=\"noopener\">their preferred format<\/a> for animated stickers in iOS 10 iMessage apps.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-loop-through-pngs\">Loop through PNGs<\/h4>\n\n\n<p>Next, a crude, but working, idea came to mind: <strong>use a bunch of<\/strong> <strong>PNGs<\/strong> <strong>and loop through them with<\/strong> <strong>JavaScript<\/strong> <strong>to imitate the video.<\/strong> But it requires using a lot of data transfer (each video frame would be a separate image) and resources to animate (you could drain a user\u2019s battery quickly or make their computer fan go crazy).<\/p>\n\n\n\n<p>I quickly abandoned that idea, but it turned out to be useful later. I\u2019ll get back to that at the end of the article.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-webm-with-alpha-transparency\">WebM with alpha transparency<\/h4>\n\n\n<p>As all the formats for <code>&lt;img&gt;<\/code> failed here, I started looking into videos. I found an article about <a href=\"https:\/\/developers.google.com\/web\/updates\/2013\/07\/Alpha-transparency-in-Chrome-video#\" rel=\"noopener\">alpha transparency in Chrome video<\/a> published in 2013, which announces Google Chrome support for WebM with an alpha channel. It even shows an example and shares tips on how to use it. I went through the article and it immediately felt like the way to go. I was even more convinced after converting my image sequence to WebM because, while GIF was weighing in at 5.8 MB, WebM with transparency,using the same frame rate and full colors was only 540 KB! That\u2019s more than 10 times smaller while offering better performance and quality. Awesome!<\/p>\n\n\n\n<p>The joy did not last long though. As soon as I opened the website on my iOS Phone I realized that I should\u2019ve started with checking the browser compatibility. Unfortunately, Safari (iOS and macOS) doesn\u2019t support transparency in WebM. While my video was working perfectly on Chrome, Firefox and Edge, Safari greeted me with an ugly black background.<\/p>\n\n\n\n<p>The search continues\u2026<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-a-good-solution\">A good Solution<\/h3>\n\n\n<p>Thankfully, I found a <a href=\"https:\/\/developer.apple.com\/videos\/play\/wwdc2019\/506\/\" rel=\"noopener\">video from WWDC 2019 announcing HEVC video with Alpha support for Safari<\/a> starting in iOS 13 and macOS Catalina. It seemed to provide the same functionality as WebM but with support on Apple devices. So I decided to use the hybrid solution: HEVC for Safari and WebM for other browsers.<\/p>\n\n\n\n<p>It seems like the perfect solution. But now we have two tasks:<\/p>\n\n\n\n<ol><li>Create an HEVC with alpha-transparency<\/li><li>Detect for Safari (and the version) to serve the correct format<\/li><\/ol>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-creating-a-transparent-video\">Creating a transparent video<\/h3>\n\n\n<p>We will start with the easy part: creating a WebM file. If you want to create, convert, or even edit video files, <a href=\"https:\/\/ffmpeg.org\/\" rel=\"noopener\">FFmpeg<\/a> is your friend. It is an extremely powerful open source multimedia framework, and if you have anything to do with multimedia files, I\u2019d recommend starting there because <a href=\"https:\/\/ffmpeg.org\/about.html\" rel=\"noopener\">it\u2019s capable of so many things<\/a>. I can say that FFmpeg has helped me reduce video file sizes over 10 times without any visible image quality degradation. But let\u2019s get back to transparency.<\/p>\n\n\n\n<p>In my experience, if you need to include animated elements into website layout, you get them as a set of video frames in PNG. Even while working on my example project, a tool that removes background from videos generated a set of images for me. So I will continue here assuming we\u2019re building the video from a set of images (remember, you can <a href=\"https:\/\/css-tricks-transfer.s3.us-east-1.amazonaws.com\/unscreen-pngs.zip\" rel=\"noopener\">download our set<\/a>), but even if you\u2019ve got a video file instead, the process will look similar (adjust FFmpeg options to your needs).<\/p>\n\n\n\n<p>We are now ready to create a video. Using the command line, we\u2019ll navigate to the folder that contains the PNG files and run the following command:<\/p>\n\n\n\n<pre rel=\"Terminal\" class=\"wp-block-csstricks-code-block language-none\" data-line=\"\"><code markup=\"tt\">ffmpeg -framerate 25 -i unscreen-%3d.png -c:v libvpx-vp9 -pix_fmt yuva420p output.webm<\/code><\/pre>\n\n\n\n<p>You can adjust the arguments to fit your needs:<\/p>\n\n\n\n<ul><li><strong><code>framerate<\/code>:<\/strong> how much images will be used for 1s of the output video<\/li><li><strong><code>-i unscreen-%3d.png<\/code>:<\/strong> input file name and format. My files have numbers from 001 to 150 so i used <code>%3d<\/code> as a mask to select all files with three digits in the name.<\/li><li><strong><code>-c:v<\/code>:<\/strong> specifies the codec to use. I want the video to be encoded with VP9, <a href=\"https:\/\/caniuse.com\/webm\" rel=\"noopener\">which is supported by most web browsers<\/a>.<\/li><li><strong><code>-pix_fmt<\/code>:<\/strong> specifies pixel format to be used. In our cas, it should support an alpha channel. You can see all supported formats if you run <code>ffmpeg<\/code> <code>--pix_fmts<\/code>.<\/li><li><strong><code>output.webm<\/code>:<\/strong> provides the desired output file name as a last argument<\/li><\/ul>\n\n\n\n<p><a href=\"https:\/\/ffmpeg.org\/documentation.html\" rel=\"noopener\">There are a lot more options available<\/a>, but I won\u2019t dive into details as it would take probably more than one article to go through them. Those provided in the example command work fine for our use case.<\/p>\n\n\n\n<p>After the process is finished, we should see a new <code>output.webm<\/code> file, and if you open it in a supported browser, you\u2019ll see a video. Easy, right?<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-creating-hevc-alpha\">Creating HEVC Alpha<\/h3>\n\n\n<p>Since we have a WebP file ready, it\u2019s time to move to the second format we will be using: <strong>HEVC with alpha<\/strong> <strong>transparency<\/strong>. Unfortunately, at the time of writing, FFmpeg doesn\u2019t support HEVC, so we have to use another tool. As far as I know, the only way to create HEVC with alpha is to use the Finder or Compressor on Mac. If you have a PC, you\u2019ll probably have to ask someone with Mac to do it for you. The Compressor app is only provided with Final Cut Pro, so I won\u2019t be using it, although it may be worth considering if you need custom settings.<\/p>\n\n\n\n<p>Since macOS Catalina, the Finder has a built in Encode Media tool to convert videos. It is simple (and free), so it feeds our needs.<\/p>\n\n\n\n<p>The Finder expects a video file as an input, so first, we have to convert the image sequence to <a href=\"https:\/\/support.apple.com\/en-us\/HT202410\" rel=\"noopener\">ProRes 4444<\/a>. This is an important step, as the Encode Media tool won\u2019t accept just any video \u2014 it will fail unless you provide the format it accepts. It gave me a headache or two until I found out the correct encoding for the input file.<\/p>\n\n\n\n<p>We can create input video using FFmpeg. As we did when creating WebM, we just have to run FFmpeg with the proper arguments:<\/p>\n\n\n\n<pre rel=\"Terminal\" class=\"wp-block-csstricks-code-block language-none\" data-line=\"\"><code markup=\"tt\">ffmpeg -framerate 25 -i unscreen-%3d.png -c:v prores_ks -pix_fmt yuva444p10le -alpha_bits 16 -profile:v 4444 -f mov -vframes 150 output.mov<\/code><\/pre>\n\n\n\n<p>From this point on, a Mac is needed. But the process is simple and does not involve typing anything in terminal, so even if you ask a non-techy friend with a Mac to do it for you, I\u2019m sure they can manage.<\/p>\n\n\n\n<p>Having ProRes4444 video ready, you can navigate to the containing folder in Finder, right-click on it, and in the context menu, select <strong>Encode Selected Video Files<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1486\" height=\"950\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/s_98A57A0DD339D864F100D762957B6D664DCBD0952931F9A3611A07022E1D267D_1605982255608_Screenshot2020-11-15at11.57.38.png?resize=1486%2C950&#038;ssl=1\" alt=\"\" class=\"wp-image-328319\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/s_98A57A0DD339D864F100D762957B6D664DCBD0952931F9A3611A07022E1D267D_1605982255608_Screenshot2020-11-15at11.57.38.png?w=1486&amp;ssl=1 1486w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/s_98A57A0DD339D864F100D762957B6D664DCBD0952931F9A3611A07022E1D267D_1605982255608_Screenshot2020-11-15at11.57.38.png?resize=300%2C192&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/s_98A57A0DD339D864F100D762957B6D664DCBD0952931F9A3611A07022E1D267D_1605982255608_Screenshot2020-11-15at11.57.38.png?resize=1024%2C655&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/s_98A57A0DD339D864F100D762957B6D664DCBD0952931F9A3611A07022E1D267D_1605982255608_Screenshot2020-11-15at11.57.38.png?resize=768%2C491&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/s_98A57A0DD339D864F100D762957B6D664DCBD0952931F9A3611A07022E1D267D_1605982255608_Screenshot2020-11-15at11.57.38.png?resize=1000%2C639&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>A window will appear. Select the desired HEVC quality (there are two to choose from), and check the option to <strong>Preserve Transparency.<\/strong> Then click the \u201cContinue\u201d button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1622\" height=\"1010\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/s_98A57A0DD339D864F100D762957B6D664DCBD0952931F9A3611A07022E1D267D_1605982261247_Screenshot2020-11-15at11.58.08.png?resize=1622%2C1010&#038;ssl=1\" alt=\"\" class=\"wp-image-328320\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/s_98A57A0DD339D864F100D762957B6D664DCBD0952931F9A3611A07022E1D267D_1605982261247_Screenshot2020-11-15at11.58.08.png?w=1622&amp;ssl=1 1622w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/s_98A57A0DD339D864F100D762957B6D664DCBD0952931F9A3611A07022E1D267D_1605982261247_Screenshot2020-11-15at11.58.08.png?resize=300%2C187&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/s_98A57A0DD339D864F100D762957B6D664DCBD0952931F9A3611A07022E1D267D_1605982261247_Screenshot2020-11-15at11.58.08.png?resize=1024%2C638&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/s_98A57A0DD339D864F100D762957B6D664DCBD0952931F9A3611A07022E1D267D_1605982261247_Screenshot2020-11-15at11.58.08.png?resize=768%2C478&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/s_98A57A0DD339D864F100D762957B6D664DCBD0952931F9A3611A07022E1D267D_1605982261247_Screenshot2020-11-15at11.58.08.png?resize=1536%2C956&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/s_98A57A0DD339D864F100D762957B6D664DCBD0952931F9A3611A07022E1D267D_1605982261247_Screenshot2020-11-15at11.58.08.png?resize=1000%2C623&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>After a moment you should see a new file, which is encoded in HEVC with alpha. It\u2019s done! Opening this file in Safari confirm that the transparency works.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1518\" height=\"852\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/s_98A57A0DD339D864F100D762957B6D664DCBD0952931F9A3611A07022E1D267D_1605982265494_Screenshot2020-11-15at11.58.38.png?resize=1518%2C852&#038;ssl=1\" alt=\"\" class=\"wp-image-328324\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/s_98A57A0DD339D864F100D762957B6D664DCBD0952931F9A3611A07022E1D267D_1605982265494_Screenshot2020-11-15at11.58.38.png?w=1518&amp;ssl=1 1518w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/s_98A57A0DD339D864F100D762957B6D664DCBD0952931F9A3611A07022E1D267D_1605982265494_Screenshot2020-11-15at11.58.38.png?resize=300%2C168&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/s_98A57A0DD339D864F100D762957B6D664DCBD0952931F9A3611A07022E1D267D_1605982265494_Screenshot2020-11-15at11.58.38.png?resize=1024%2C575&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/s_98A57A0DD339D864F100D762957B6D664DCBD0952931F9A3611A07022E1D267D_1605982265494_Screenshot2020-11-15at11.58.38.png?resize=768%2C431&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/s_98A57A0DD339D864F100D762957B6D664DCBD0952931F9A3611A07022E1D267D_1605982265494_Screenshot2020-11-15at11.58.38.png?resize=1000%2C561&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Last but not least, it\u2019s time to use videos on the website!<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-serving-transparent-videos-for-all-browsers\">Serving transparent videos for all browsers<\/h3>\n\n\n<p>We can use <code>&lt;video&gt;<\/code> element to serve videos. If the browser supports the given format in the <code>src<\/code> attribute, it will just work. But as I\u2019ve mentioned, we need to serve HEVC for Safari and WebM for other browsers.<\/p>\n\n\n\n<p>There is one more thing to take care of: some browsers support WebM or HEVC itself <em>but without transparency<\/em>. Those browsers will play the video but with a black background instead of an alpha channel. For example, Safari 12 will play HEVC without transparency. That\u2019s unacceptable for us.<\/p>\n\n\n\n<p>Normally, I&#8217;d use the &lt;source \/&gt; element to provide the video along with multiple formats as fallbacks, and the browser would pick the one it supports. However, since we want to show HEVC only on specific Safari versions, we will have to set the video <code>src<\/code> attribute instead using JavaScript.<\/p>\n\n\n\n<p>HEVC with transparency is supported in iOS 13 and Mac Safari 13, so let\u2019s start by detecting those. The recommended way to adjust website features based on support is by detecting the existence of an API rather than looking at the User Agent, but I didn\u2019t find any simple way to detect if the browser supports transparency in video format. Instead, I came up with my own solution. It\u2019s not pretty, but it does the job.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">function supportsHEVCAlpha() {\n  const navigator = window.navigator;\n  const ua = navigator.userAgent.toLowerCase()\n  const hasMediaCapabilities = !!(navigator.mediaCapabilities &amp;&amp; navigator.mediaCapabilities.decodingInfo)\n  const isSafari = ((ua.indexOf('safari') != -1) &amp;&amp; (!(ua.indexOf('chrome')!= -1) &amp;&amp; (ua.indexOf('version\/')!= -1)))\n  return isSafari &amp;&amp; hasMediaCapabilities\n}<\/code><\/pre>\n\n\n\n<p>This targets Safari 13 and above by looking at <code>navigator.mediaCapabilities<\/code>, which is not supported in older versions, as well as looking that the browser is Safari at all. If the function returns <code>true<\/code>, then I\u2019m good to go with HEVC alpha. For any other case, I\u2019ll load WebM video.<\/p>\n\n\n\n<p>Here&#8217;s an example of how this comes together in HTML:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;video id=\"player\" loop muted autoplay playsinline>&lt;\/video>\n\n&lt;script>\nconst player = document.getElementById('player');\nplayer.src = supportsHEVCAlpha() ? 'output.mov' : 'output.webm';\n&lt;\/script><\/code><\/pre>\n\n\n\n<p>If you\u2019re curious about those <code>loop muted autoplay playsinline<\/code> arguments on video element, those are about replicating a GIF-like experience:<\/p>\n\n\n\n<ul><li>Without <code>muted<\/code>, the video will not play without user interaction.<\/li><li>With <code>playsinline<\/code>, on iOS, the video plays right where it is in the layout instead of opening up in fullscreen.<\/li><li>With <code>loop<\/code>, the video repeats over and over.<\/li><li>With <code>autoplay<\/code>, it will start playing the video automatically on page load (as long as we also have <code>muted<\/code> in place).<\/li><\/ul>\n\n\n\n<p>That\u2019s it! We have a lightweight, performant and high-quality solution for transparent videos, that works on most modern browsers (at least the last two recent versions of Chrome, Firefox, Safari and Edge). We can add some basic HTML and CSS to integrate static content with it and make it a little bit more real-life, or just use the same idea that\u2019s in my demo. That wasn\u2019t too bad, was it?<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Hey, but what about IE 11? My whole company is using it!<\/p><\/blockquote>\n\n\n\n<p>In general, I\u2019d recommend limiting a feature like this to modern browsers and hiding the video in IE. The video is probably not a critical element of the website. Although, I used to work on a commercial project where IE 11 support was a must and I was forced to figure something out to show the transparent video there. In the end, I ended up cycling through PNG images with JavaScript. I reduced the amount of frames and switched between them using a timer. Sure, the performance was awful, but it worked. The video was quite important to the whole design so we intentionally decided to sacrifice performance on IE 11 to provide the full experience.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-summary\">Summary<\/h3>\n\n\n<p>I hope that I\u2019ve saved you some time researching the idea of alpha-transparent video and that now you\u2019re be able to incorporate animated elements like this on your website. I bet you\u2019ll need it someday!<\/p>\n\n\n\n<p>Do you have a different idea of how to use transparent video? Or maybe some experience with that already? Let me know in the comments.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>As websites are becoming more and more dynamic when it comes to design, there is sometimes a need to incorporate complex, animated elements. There are many ways to do that from CSS transitions to 3D rendering on canvas, and animated SVG. But it is often easier to use a &lt;video&gt; since they can be rather [&hellip;]<\/p>\n","protected":false},"author":279977,"featured_media":328366,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"Overlaying Video With Transparency While Wrangling Cross-Browser Support by @MaciekCaputa","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1200,1139,672],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/transparent-video-overlay.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":64,"url":"https:\/\/css-tricks.com\/css-transparency-settings-for-all-broswers\/","url_meta":{"origin":328311,"position":0},"title":"CSS Transparency Settings for All Browsers","date":"November 4, 2007","format":false,"excerpt":"Transparency is one of those CSS properties that has a weird history and requires lots of different properties and values to ensure cross browser compatibility that goes back as far as you can. To cover all your bases, you need a bunch of CSS statements. Fortunately they don't interfere with\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":318216,"url":"https:\/\/css-tricks.com\/nailing-the-perfect-contrast-between-light-text-and-a-background-image\/","url_meta":{"origin":328311,"position":1},"title":"Nailing the Perfect Contrast Between Light Text and a Background Image","date":"August 7, 2020","format":false,"excerpt":"Have you ever come across a site where light text is sitting on a light background image? If you have, you'll know how difficult that is to read. A popular way to avoid that is to use a transparent overlay. But this leads to an important question: Just how transparent\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/contrast-bg.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":359032,"url":"https:\/\/css-tricks.com\/maybe-there-kinda-is-background-opacity\/","url_meta":{"origin":328311,"position":2},"title":"Maybe there kinda is background-opacity?","date":"December 15, 2021","format":false,"excerpt":"I was reading Jake's \"Cross-fading any two DOM elements is currently impossible\" which is a wonderfully nerdy deep dive into how there is no real way to literally cross-fade elements. Yeah, you can animate both of their opacities, but even that isn't quite the same. Turns out there is a\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/Screen-Shot-2021-12-10-at-2.39.42-PM.png?fit=1169%2C1200&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":2151,"url":"https:\/\/css-tricks.com\/rgba-browser-support\/","url_meta":{"origin":328311,"position":3},"title":"RGBa Browser\u00a0Support","date":"May 19, 2010","format":false,"excerpt":"This article was originally published on February 2, 2009 and is now being updated to clarify the concept and update the information for modern browsers. RGBa is a way to declare a color in CSS that includes alpha transparency support. It looks like this: div { background: rgba(200, 54, 54,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/rgbaexample.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":20295,"url":"https:\/\/css-tricks.com\/uniqlo-stripe-hovers\/","url_meta":{"origin":328311,"position":4},"title":"Uniqlo Stripe Hovers","date":"February 27, 2013","format":false,"excerpt":"For the larger promotional boxes in the design of Uniqlo.com, they use animated stripes that reveal on hover. It's kind of awesome, if you ask me. Perhaps because they wanted to share the awesome with as many different browsers as possible, they used an animated GIF to produce the effect.\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":377264,"url":"https:\/\/css-tricks.com\/some-cross-browser-devtools-features-you-might-not-know\/","url_meta":{"origin":328311,"position":5},"title":"Some Cross-Browser DevTools Features You Might Not Know","date":"March 22, 2023","format":false,"excerpt":"I spend a lot of time in DevTools, and I\u2019m sure you do too. Sometimes I even bounce between them, especially when I\u2019m debugging cross-browser issues. DevTools is a lot like browsers themselves \u2014 not all of the features in one browser\u2019s DevTools will be the same or supported in\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/s_7E25E76B5C1A2A0120D43B477F8F8B0FA75578B215D36F3A918DC29D997AA0F4_1674721838803_Screenshot2023-01-26at14.00.01.png?fit=1200%2C862&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/transparent-video-overlay.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/328311"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/279977"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=328311"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/328311\/revisions"}],"predecessor-version":[{"id":330590,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/328311\/revisions\/330590"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/328366"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=328311"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=328311"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=328311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}