safari video overlay

Overlaying Video With Transparency While Wrangling Cross-Browser Support

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 <video> since they can be rather efficient and, with them, just about anything visual is possible.

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’s possible, but can be tricky, especially cross-browser. Let’s explore that.

Here’s an example

To see how transparent video overlays work, I’ve 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’m sure that realistic, cute dog would improve the conversion rate!

You can follow along with this article to recreate this demo by yourself. Part of what you’ll need to create a video like this is an “image sequence” (a bunch of alpha-transparent images we’ll stitch together into a video). I’m providing the images I used for the example.

Exploring possibilities

To achieve this effect, I started with a search for a ny kind of solution that would allow me to insert animated content with transparent background on the page.

The first thing that came up was a GIF. 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.

The next option I’ve looked at was APNG , which for some reason, is not as popular as GIF but is much better. (I didn’t 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.

Fun fact: Apple adopted the APNG format as their preferred format for animated stickers in iOS 10 iMessage apps.

Loop through PNGs

Next, a crude, but working, idea came to mind: use a bunch of PNGs and loop through them with JavaScript to imitate the video. 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’s battery quickly or make their computer fan go crazy).

I quickly abandoned that idea, but it turned out to be useful later. I’ll get back to that at the end of the article.

WebM with alpha transparency

As all the formats for <img> failed here, I started looking into videos. I found an article about alpha transparency in Chrome video 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’s more than 10 times smaller while offering better performance and quality. Awesome!

The joy did not last long though. As soon as I opened the website on my iOS Phone I realized that I should’ve started with checking the browser compatibility. Unfortunately, Safari (iOS and macOS) doesn’t support transparency in WebM. While my video was working perfectly on Chrome, Firefox and Edge, Safari greeted me with an ugly black background.

The search continues…

A good Solution

Thankfully, I found a video from WWDC 2019 announcing HEVC video with Alpha support for Safari 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.

It seems like the perfect solution. But now we have two tasks:

• Create an HEVC with alpha-transparency
• Detect for Safari (and the version) to serve the correct format

Creating a transparent video

We will start with the easy part: creating a WebM file. If you want to create, convert, or even edit video files, FFmpeg is your friend. It is an extremely powerful open source multimedia framework, and if you have anything to do with multimedia files, I’d recommend starting there because it’s capable of so many things . I can say that FFmpeg has helped me reduce video file sizes over 10 times without any visible image quality degradation. But let’s get back to transparency.

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’re building the video from a set of images (remember, you can download our set ), but even if you’ve got a video file instead, the process will look similar (adjust FFmpeg options to your needs).

We are now ready to create a video. Using the command line, we’ll navigate to the folder that contains the PNG files and run the following command:

You can adjust the arguments to fit your needs:

• framerate : how much images will be used for 1s of the output video
• -i unscreen-%3d.png : input file name and format. My files have numbers from 001 to 150 so i used %3d as a mask to select all files with three digits in the name.
• -c:v : specifies the codec to use. I want the video to be encoded with VP9, which is supported by most web browsers .
• -pix_fmt : specifies pixel format to be used. In our cas, it should support an alpha channel. You can see all supported formats if you run ffmpeg --pix_fmts .
• output.webm : provides the desired output file name as a last argument

There are a lot more options available , but I won’t 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.

After the process is finished, we should see a new output.webm file, and if you open it in a supported browser, you’ll see a video. Easy, right?

Creating HEVC Alpha

Since we have a WebP file ready, it’s time to move to the second format we will be using: HEVC with alpha transparency . Unfortunately, at the time of writing, FFmpeg doesn’t 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’ll 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’t be using it, although it may be worth considering if you need custom settings.

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.

The Finder expects a video file as an input, so first, we have to convert the image sequence to ProRes 4444 . This is an important step, as the Encode Media tool won’t accept just any video — 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.

We can create input video using FFmpeg. As we did when creating WebM, we just have to run FFmpeg with the proper arguments:

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’m sure they can manage.

Having ProRes4444 video ready, you can navigate to the containing folder in Finder, right-click on it, and in the context menu, select Encode Selected Video Files .

A window will appear. Select the desired HEVC quality (there are two to choose from), and check the option to Preserve Transparency. Then click the “Continue” button.

After a moment you should see a new file, which is encoded in HEVC with alpha. It’s done! Opening this file in Safari confirm that the transparency works.

Last but not least, it’s time to use videos on the website!

Serving transparent videos for all browsers

We can use <video> element to serve videos. If the browser supports the given format in the src attribute, it will just work. But as I’ve mentioned, we need to serve HEVC for Safari and WebM for other browsers.

There is one more thing to take care of: some browsers support WebM or HEVC itself but without transparency . 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’s unacceptable for us.

Normally, I’d use the <source /> 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 src attribute instead using JavaScript.

HEVC with transparency is supported in iOS 13 and Mac Safari 13, so let’s 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’t find any simple way to detect if the browser supports transparency in video format. Instead, I came up with my own solution. It’s not pretty, but it does the job.

This targets Safari 13 and above by looking at navigator.mediaCapabilities , which is not supported in older versions, as well as looking that the browser is Safari at all. If the function returns true , then I’m good to go with HEVC alpha. For any other case, I’ll load WebM video.

Here’s an example of how this comes together in HTML:

If you’re curious about those loop muted autoplay playsinline arguments on video element, those are about replicating a GIF-like experience:

• Without muted , the video will not play without user interaction.
• With playsinline , on iOS, the video plays right where it is in the layout instead of opening up in fullscreen.
• With loop , the video repeats over and over.
• With autoplay , it will start playing the video automatically on page load (as long as we also have muted in place).

That’s 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’s in my demo. That wasn’t too bad, was it?

Hey, but what about IE 11? My whole company is using it!

In general, I’d 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.

I hope that I’ve saved you some time researching the idea of alpha-transparent video and that now you’re be able to incorporate animated elements like this on your website. I bet you’ll need it someday!

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.

Maybe just overlay a canvas element on top of the video and write to it as the transparency layer?

Great article! I’ve been looking at this problem for years and at last it seems that the browsers are doing the right thing. Thanks for sharing!

Thank you for this.

Unfortunately checking for Safari version alone is not enough. On desktop computers HEVC decoding is only supported from Mac OS 10.15 (Catalina).

On versions prior to that the video will render with a black background. Any pointers on how to refine the feature detection would be appreciated.

This is exactly the issue I’m facing. Would love a solution that could play another version for MacOS <10.14, perhaps a gif?

Great guide, thank you.

Thanks for this excellent tutorial! I am new to ffmpeg, and I am getting this error:

Incompatible pixel format ‘yuva420p’ for codec ‘libvpx-vp9’, auto-selecting format ‘yuv420p’

I looked around a bit and someone suggested “changing native decoder to libvpx decoder which provides alpha”, but unfortunately did not provide instructions to do that. Have you run into this and do you have any advice?

Thanks in advance, very grateful for this post!

This works perfectly on Mac, Windows and on Android browsers, but the videos don’t display on the iPhone. Any idea how to resolve this? The player already has ‘playsinline’ in it.

I know that perhaps I am late but anyway: you should also add ‘preload=metadata’ attribute and add that meta data in the end of your ‘src’ value. That value is a timestamp of video you want to show. Example below:

GREAT !!! been looking for this. thanks. can you help ? how do I float my video of a News anchor on top of my html (a spinning globe js). I need to have the User control and spin the globe. Did you just explain all that here? what if i want my video to be a Live stream?

That article is truly a gem! Thank you so much! Btw, worth mentioning that all mobile browsers on iOS should be treated as Safari. For example, Chrome on iOS does not support .webm container, neither do the others, but Chrome and other browsers on iOS does support .mov container!

In previous comment under “…all mobile browsers on iOS should be treated as Safari” I meant it in context of transparent video problem.

Great tut, but is there a way to play opaque.mp4 video for Safari below version 13 and for other browsers transparent .webm as it is in the script? Because the script only calls .webm if the Safari is not 13+, but Safari supports webm only from version 15+. Thanks!

Use Reactions, Presenter Overlay, and other effects when videoconferencing on Mac

macOS includes a variety of video and audio features that you can use in FaceTime and many other videoconferencing apps.

Presenter Overlay

Camera modes and controls.

Requires macOS Sonoma or later on a Mac with Apple silicon , or macOS Sonoma or later on a Mac using Continuity Camera with iPhone 12 or later

Reactions fill your video frame with a 3D effect expressing how you feel. To show a reaction, make the appropriate hand gesture in view of the camera and away from your face. Hold the gesture until you see the effect.

Thumbs Down

Requires macOS Sonoma or later on a Mac with Apple silicon

Presenter Overlay elevates your presence by including you on top of the content that you’re sharing when on a video call.

Presenter Overlay: Large

The large overlay keeps you prominent while your shared screen is framed next to you — even when using Center Stage . Your room appears in the background (virtual backgrounds are disabled), and you can walk, talk, and move in front of the screen.

Use the screen-sharing feature of your video app to share a screen.

Presenter Overlay: Small

The small overlay shows your face in a movable bubble, which gives more space to the screen you're sharing. You can point to important details.

To move the bubble, drag it to any position in your video window (not in the preview window).

To more quickly turn Presenter Overlay on or off, you can set up a keyboard shortcut : Choose Apple menu  > System Settings, click Keyboard in the sidebar, then click Keyboard Shortcuts on the right. Click Presenter Overlay, then assign keyboard shortcuts on the right.

Use camera modes and controls to enhance your image or background, or change the way you're framed in the video window.

Center Stage

Requires a Mac using Continuity Camera with iPhone 11 or later, excluding iPhone SE models

Center Stage keeps you centered in the camera frame as you move around.

Portrait Mode

Requires a Mac laptop with Apple silicon using the built-in camera, or a Mac using Continuity Camera with iPhone XR or later

Portrait mode blurs the background to keep the focus on you.

Studio Light

Requires macOS Sonoma or later on a Mac laptop with Apple silicon using the built-in camera, or macOS Sonoma or later on a Mac using Continuity Camera with Phone 12 or later

Studio light dims the background and illuminates your face, without relying on external lighting. Studio Light is great for difficult lighting situations, like backlit scenes in front of a window.

Using the Ultra Wide camera of your iPhone, Desk View shows your desk and your face at the same time. It's great for creating DIY videos, showing live sketches over FaceTime, and more.

Start your video call, then open the Desk View app as follows, depending on your video app and the version of macOS you're using:

FaceTime: Click the Desk View button in the video window.

To zoom in or out of your desktop, drag the onscreen control in the Desk View setup window. If you can't get a good view of both face and desktop, try again with your iPhone in portrait orientation. You can also make these adjustments after you start Desk View. (To skip this setup step in the future, use the View menu in the Desk View menu bar to turn off Always Show Setup.)

Click Start Desk View, then share the Desk View window:

If using FaceTime, the Desk View window should already be shared. If others on the call can't see your desktop, click the Desk View button in the FaceTime window again, then click the Share Desk View button in the Desk View window.

If using a different app, use its screen-sharing feature to select the Desk View window for sharing.

To stop Desk View, close the Desk View window.

Manual framing adjustments

Requires macOS Sonoma or later on a Mac using an Apple Studio Display, or macOS Sonoma or later on a Mac using Continuity Camera with iPhone XR or later

Zoom: The zoom control is a series of tick marks showing the zoom level, from 3x zoomed in to 0.5x zoomed out. Drag the control left or right to adjust zoom.

Pan: Drag your image within the preview window to pan and adjust the frame.

Recenter: Click the Recenter button to position your face in the center of the frame. (To remain centered as you change position, use Center Stage instead.)

Choose from these mic modes:

Spatial Audio makes the voices you hear sound like they're coming from the direction in which each person is positioned on the screen. It's available on these Mac models:

Mac models with Apple silicon, if using the internal speakers, wired headphones, or AirPods

Intel-based Mac laptop models introduced in 2018 later, if using the internal speakers or wired headphones

Intel-based iMac models introduced in 2018 or later, if using wired headphones

Explore Apple Support Community

Find what’s been asked and answered by Apple customers.

Contact Apple Support

Need more help? Save time by starting your support request online and we'll connect you to an expert.

How to use transparent videos on the web in 2023

Have you ever wondered why you don’t see videos with transparency on the web, let’s say, all the time?

Just imagine all the cool things you could do with it:

• Show a video on top of your HTML contents
• Show a video on top of another video
• Play a video that looks like it’s changing shape
• Show a video that just ever so slightly overlaps the body text on a page, breaking the boxy look

SERIES This post is a part of our series called The Big Guide to Transparent Backgrounds in videos and images

You may have even tried a Youtube embed or a video tag and found that, nope, that didn’t work either. And how do you even make a transparent video - a video with an alpha channel - in the first place? And if you do find out, how do you double-check that it is, in fact, transparent? It’s not a friendly environment. It’s as if someone decided a long ago that we won’t need this. But we do.

And it’s technically possible. On top of that, the results look great and will set your project apart from those flat, boxy videos everyone else has.

Here’s what we’ll go through:

Let's get started!

What’s an example of alpha transparency on the web?

Glad you asked. Here’s an example we put together. See the live site here and the Webflow project here.

Here’s a more straightforward example ( demo page ) ( codePen )

Why isn’t transparency used more?

Maybe because it’s just not supported — in an obvious way. In this post, I’ll show you how to do this, but also how to cheat and make a shortcut using smoke and mirrors, making your life slightly simpler in some cases.

Let’s get to it. First, let’s agree on a few terms: Foreground, Video, Web page contents. You can imagine a web page like a stack of layers on top of each other:

So, the blue box is your website, the red box is your transparent video, and the green box is your optional foreground, which might be a video.

Under your video, the big question that will determine our path as we continue our journey is, what do you want to use as a background ?

Your answer decides if we can go the easy way or the slightly more brutal way. Let’s start with the easy way.

The easy way

Here’s an example.

See how they have two videos going on here? On the top layer, there’s a video showing their product. The elements shrink and grow like it’s no big deal. And to top it off, they even have a video running below the video. Here’s what that would look like

How did they do that? Well, they didn’t . Here’s what’s going on:

What we see here is a clever workaround. The Typeform designers combined the UI video on top of the background video into one video. Then, they matched the background color with the color under the text and used the new, combined video as the background element. No transparency is needed.

Here’s the video they used:

So that’s one workaround - smoke and mirrors. It works because the background is abstract and nicely blends with the site’s background.

The big question is now: What if the background is not abstract? What if you want to play your video on top of rendered HTML, like in the first example? For that, we need a bigger knife. We need the real thing.

The real way

This shouldn’t be a problem. We’ve had transparent video formats for years. So why isn’t this simple? Long legal story short: There are two significant browsers from two big companies. Google and Chrome think open source is fantastic, so they made their own open-source format. Apple and Safari want to stick to the MPEG standard, so they support HEVC (H265).

The results?

• Safari supports HEVC with alpha, and Chrome does not.
• Chrome supports VP9 with alpha, and Safari does not.

Now what? You guessed it: We’ll have to provide both formats and let each browser choose.

As of Safari 15 in macOS Big Sur, Safari has VP9/webm support. But not for transparency.

Converting your videos

The first thing you need is a video with an alpha channel. (If you’re using Rotato, here’s how to get one )

What to export

Before you do anything, make sure your video isn’t too big, as you’ll be playing it on the web directly. In Rotato, 720p is often big enough for a short video.

• First, export your HEVC with alpha , and call it movie-hevc.mov . This file will be our Safari-ready movie.
• If your video editing app supports VP9 with transparency, choose that. If it doesn’t support it directly, like Rotato, go for the HEVC With Alpha, then convert to WebM, as described below.

We now have 50% of the videos we need, so we’re halfway there! Next up, we’ll convert that HEVC video to VP9 so Chrome has something to play.

Using Rotato Converter

Here’s some good news for you: We built a small, free tool that converts to both alpha transparency formats in one go! It’s simple enough to download and use, but you can also check out our guide to using Rotato Converter .

Using FFmpeg

If you want to geek out, you can install FFmpeg and do the conversions yourself. Here’s how to do that:

Installing FFmpeg

First, we’ll need an app that can convert between video formats. FFmpeg is free and fast. Install the latest version of FFmpeg here . If you’re not sure how to put FFmpeg in your path, see this video tutorial for an end-to-end tutorial.

It’s a command-line tool, so you’ll need to open Terminal on your Mac. Once there, cd into the folder with the source video.

Converting to WebM with FFmpeg

In Terminal, enter the following command in the folder with your exported videos.

If you have an Intel Mac, you will now hear your cooling fans getting to work. It will take a few minutes, depending on how big your video is. There is a lot of math going on here, so grab a coffee and wait. It can easily take 10-15 minutes.

Using the videos on the web

You should now have the two video files you need. It’s time to put them online!

Upload the movies to your web server, and use this code snippet wherever you need your video.

Final thoughts

That was a lot! But when you look at it from above, it’s a simple process:

• Create your video with transparency in a video editing program like Premiere, Final Cut or Rotato
• Convert that video to HEVC With Alpha and WebM
• Upload those videos to a web server
• Embed the videos on your website using the video tag with two source children tags.

Now that you know how to remove the boxy look of videos and even show the content below, ample creative space opens up. So get out there and blow everyone’s minds with your alpha channels.

We’d love to hear if this guide was helpful or if you have any comments. We’re constantly improving our guides. So let us know about our   guides at rotato. app. We made the 3D illustrations   with the excellent   Spline tool , and the example comes from   Typeform .

How-To Geek

How to use floating apps (slide over) on an ipad.

Curious about floating windows on the iPad? It's a multitasking feature called Slide Over---here's how to use it.

Quick Links

What is slide over, what is the difference between slide over and split view, how do i use slide over, how do i hide and recall the slide over window, how to get rid of a slide over window, can i use split view and slide over at the same time, learn more about multitasking---or disable it completely.

One of the major features of multitasking on the iPad is called Slide Over. It lets you use a second app in a floating window above a full-screen app. It's useful, but mastering it can be tricky. Here are some tips.

Slide Over is a way to multitask on the iPad. It displays a primary app in full-screen mode and secondary app in a small floating window on the left or right side of the screen. The Slide Over window can be quickly dismissed and called back when needed, making it ideal for checking information from an app quickly while working on something else.

Apple first introduced Slide Over alongside other iPad multitasking features in iOS 9 , which launched in 2015. It's available on iPad Pro or later, iPad Air or later, and iPad mini 2 or later. All iPad models currently sold by Apple support Slide Over.

Not every app supports Slide Over, but most official Apple-made apps do. Third-party developers must specifically choose to support the feature for it to work properly. There is no master list of Slide Over supported apps, so you'll have to use trial-and-error to see if your favorite apps work with it.

iPad's other major multitasking feature, Split View, displays two windows side by side with a black divider in the middle. It is designed for using two apps at the same time in a situation where you may need to continuously reference each one or move information from one to the other.

The main difference between Split View and Slide Over is how much screen real estate each app takes up while using multiple apps. They also differ in functionality, each being suited to different types of tasks.

Related: What's the Difference Between Split View and Slide Over on an iPad?

To use Slide Over, open an app. This will be your primary app that runs full screen while you place a Slide Over window on top of it. The easiest way to use an app with slide over involves dragging it from your Dock .

Related: How to Add an App to the Dock on an iPad

With the primary app you want to use already open, slowly swipe up from the bottom of the screen to open the Dock.

Find the second app you'd like to open, place your finger on its icon, and hold it for just a moment. (But not too long, or you'll trigger a pop-up menu.) Slowly drag the icon upward off the dock toward the direction you'd like to place the Slide Over window.

After a moment, the icon will become part of a blurry rectangular box with rounded edges. Keep dragging the icon with your finger until it is located in the half of the screen where you want the Slide Over window.

Release your finger, and the new app will appear as a floating Slide Over window.

Once an app is in Slide Over mode, you can easily move it to the other side of the screen by dragging the control bar at the top of the window and repositioning it to the other side.

Apple makes it easy to quickly dismiss a Slide Over window for instances where you might want to check an app quickly, then push it out of the way to see the main app.

If you want to temporarily hide the Slide Over window, place your finger on the control bar at the top and quickly swipe it toward the right or left edge of the screen.

When you want to check the Slide Over window again, you can recall it quickly by swiping inward from the left or right edge of the screen, depending on which side you hid it.

To fully close a Slide Over window so that it doesn't pop up again if you swipe on the edge of the screen, you have to do some gesture gymnastics. You'll have to go through Split View first, which is a feature where two apps can be used side-by-side in a larger view.

First, hold your finger on the control bar at the top of the Slide Over window, then begin slowly sliding it toward either edge of the screen.

As you slide, the two windows will transform into blurred out boxes with the app icons inside of them. Keep dragging the window toward the edge of the screen.

Lift your finger at the edge of the screen, and the two apps will now be in Split View mode. You can now close the unwanted window by sliding the black partition between the two windows all the way to the edge of the screen until one window disappears.

Apple makes it possible to use Split View and Slide Over at the same time. Using this feature, you can have a total of three app windows on the screen at once.

To do this, start in Split View mode, then open the dock by slowly swiping upward from the bottom edge of the screen. Slowly drag the app icon (for the third app that will be in Slide Over) on top of the black partition in the middle of the screen.

To get rid of the Slide Over window, use its control bar at the top of the window to drag it to the side of the screen until it replaces one of the Split View apps. Then you can close the window by sliding the black center partition all the way to the edge of the screen until one window disappears.

Multitasking features on the iPad can be very useful and powerful if you learn to use them. They do take some practice and patience to get just right.

If you prefer to use the iPad as a single-task device or you keep bringing up extra app windows by accident, you can easily turn off Split View and Slide Over from Settings .

Related: How to Use Multiple Apps at Once on an iPad

• Contact Rob

Control inline video—and more—in Safari

• Mar 13 '17 Mar 13 '17
• Mac OS X Hints , macOS Apps , Safari

This is another oldie but goodie from Mac OS X Hints, explaining how to enable the Debug menu in Safari. To do that, quit Safari, open Terminal, paste the following line, and press Return:

Auto-play videos suck. They use bandwidth, and their annoying sounds get in the way when you’re listening to music and open a web page. … But you can stop auto-play videos from playing on a Mac. If you use Chrome or Firefox, it’s pretty simple, and the plugins below work both on macOS and Windows; if you use Safari, it’s a bit more complex, but it’s not that hard.

In Safari, they key is the Debug menu, as Kirk points out. Go to Media Flags and select (activate) Disallow Inline Video, and that should be the end of auto-playing video. See Kirk's blog post for ways to do the same in Firefox and Chrome.

Beyond auto-play video, though, there's lots to geek out about in the Debug menu…

First up is this, the ultimate geeky overlay:

That's available via the Show Resource Usage Overlay, and it's a per-tab overlay—open a new tab, and the overlay statistics apply just to that tab. Most of what's there probably isn't of much general use, though it's interesting to see CPU usage on a per-tab basis—try it on a site with auto-playing video, and you'll see one reason why such things are universally hated. You can drag the overlay around, but it can't be positioned outside the window area.

There are some other potentially-interesting looking settings in the Debug menu, including the first two, which let you disable or cap the per-tab processes that Safari uses. (By default, each new tab in Safari is a new process.)

You can also reset or recompute the Top Sites page, which may be useful if you use that page; I don't. You can crash—or perhaps more usefully, pause—a web process (i.e. a tab doing something). You can even load a blank tab on a five-second delay.

There's a lot here you won't care about, too, or that when set, may cause issues rendering pages. And the Start Stress Test menu item appears to be strictly for use within Apple, based on the error message it displays when selected:

As with all things not enabled by default, be careful when playing around with the Debug menu. I suggest changing only one thing at a time if you're going to experiment, so you can easily revert.

Related Posts:

• I despise this icon
• Using network locations in macOS Ventura
• Replace the mini music player that Apple took away
• Open PostScript files in Preview in macOS Ventura
• Revisiting literal music videos, 14 years later
• How to enable the "Beta updates" feature in macOS 13.4+

3 thoughts on “Control inline video—and more—in Safari”

Media Flags under Debug seems to be gone now, Safari 9.1.2. I've read this tip in many places, but I just don't have the Media Flags option. The menu skips from Drawing/Compositing Flags to Debug Overlays. And I've looked in all the submenus, too.

It's still here in Safari 10.1 … what version of macOS/OS X are you on?

Thank you for replying. On one system, 10.11.6, Safari 9.1.2. I've disabled and enabled Debug menu a couple of times. Also, the command-line equivalents that I found for for doing this in Terminal have no effect on autoplay. But I just tried on a system 10.12.3 and Safari 10, and media flags are there. I will try to disable autoplay there.

Comments are closed.

Want to highlight a helpful answer? Upvote!

Did someone help you, or did an answer or User Tip resolve your issue? Upvote by selecting the upvote arrow. Your feedback helps others!  Learn more about when to upvote >

Newsroom Update

Apple is introducing a new Apple Watch Pride Edition Braided Solo Loop, matching watch face, and dynamic iOS and iPadOS wallpapers as a way to champion global movements to protect and advance equality for LGBTQ+ communities.  Learn more >

Announcement

Introducing the iPad Pro with Apple M4 chip, the redesigned iPad Air in two sizes, and the all‑new Apple Pencil Pro.  Watch the event >

Looks like no one’s replied in a while. To start the conversation again, simply ask a new question.

How to disable video auto-play on Safari after latest iOS update 15.0.2

Hi everyone, first time poster , so apologies if post not in the right forum. I’ve recently updated to 15.0.2 on my iPad Pro , and post update , have noticed that when using Safari, videos have started auto playing on certain websites. I’ve tried every single thing to disable auto-play , including Settings -> Accessibilty -> Per-App settings and set video preview to OFF , but , the video previews keep happening, though with muted volume . Is there a setting I’m missing, or is this an issue with iOS 15 ? TIA

iPad (5th gen) Wi-Fi

Posted on Oct 20, 2021 6:05 AM

Posted on Oct 29, 2021 3:43 PM

Yes, I tried disabling Java as well, but then it affects a lot of other stuff as well. Wish Apple would address this. Have just upgraded to iOS 15.1 and found that it’s still an issue. I use Chrome as my browser , and thought the issue is with Chrome. On my Phone(android) had no problem changing the setting so that auto-play is disabled for certain sites. Surprisingly, on iPad, going to Settings — Accessibility — Per App settings and disabling Auto-play solved the issue for apps like Pinterest, FB etc. It’s just Safari that is immune to this setting 😐

Similar questions

• Stop autoplay please ! ! ! Someone at google has messed up youtube, so that when you go to youtube.com it will start autoplaying videos on the front page. After it has finished autoplaying a video it will jump to the next video and start to autoplay that as well. If you scroll down the page it will start to autoplay those videos as well ! ! ! It is so incredibly annoying and frustrating. HOW do you stop this? I have tried this suggestion but it doesn’t help. https://geekchamp.com/how-to-disable-safari-autoplay-videos-on-iphone/ Please help 190 5
• How to enable audio auto-play in iPad Safari I just signed up for Amazon Music. In order to play a selection, Amazon popped up a dialog stating, "Enable Auto-Play - To play music, you must enable auto-play. " I searched iPad's settings and Safari's settings, but auto-play settings was nowhere to be found. iPad Air 3rd Gen iOS 15.3.1 Some advice anyone? Thank you 2786 3
• Auto-play in Safari in iOS How do I enable auto-play in Safari on iOS? We are using a web app at our school and the sound effects are not playing in Safari. The developer has indicated that auto-play must be enabled in Safari to get this to work. I can enable auto-play in Safari on my MacBook (Big Sur 11.6) and can hear the web app sound effects but cannot get these effects to work in iOS, neither on iPads (7th gen) or iPhones running various versions of iOS 14 and 15. 1587 4

Loading page content

Page content loaded

Oct 29, 2021 3:43 PM in response to Ivansyv

Oct 20, 2021 6:09 AM in response to Yaalisai2018

Have you found this setting?

Settings > Accessibility > Motion > Auto-Play Video Previews - set to OFF

Oct 29, 2021 1:13 PM in response to Yaalisai2018

Doesn’t work, either. It seems to me this no longer works. Other than disabling JavaScript altogether there’s no other way to disable videos.

Oct 20, 2021 6:20 AM in response to LotusPilot

Thanks for replying. Yes, I’d turned it off in “Motion” as well , but left Auto-play Message Effects ON . Does that make a difference ? Thanks