safari html5 video autoplay not working

You can make a difference in the Apple Support Community!

When you  sign up with your Apple ID , you can provide valuable feedback to other community members by  upvoting helpful replies and User Tips .

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

Safari doesn’t auto play videos

Some websites safari doesn’t auto play videos and other websites they run a little slow than in other browsers.

What do you recommend to do?

MacBook Pro 15″, macOS 13.0

Posted on Oct 6, 2022 12:58 PM

Posted on Oct 16, 2022 7:26 AM

It's possible the specific website you're attempting to view has settings that stop the video from automatically loading. You can reach out to the web developer to find out for sure.

You can customize settings for specific websites in Preferences in Safari. The steps below will guide you through this so specific websites load the way you'd like them to.

• Choose the options you want for the website (options vary by website):
• Use Reader when available:  View webpage articles without ads or other distractions.
• Enable content blockers:  Stop ads and other unwanted content from appearing.
• Page Zoom:  Make text and images easier to see.
• Auto-Play:  Choose whether video can play automatically on the website.
• Pop-up Windows:  Choose whether the website can show pop-up windows.
• Camera:  Choose whether the website can use your camera.
• Microphone:  Choose whether the website can use your microphone.
• Screen Sharing:  Choose whether the website can use your camera and microphone.
• Location:  Choose whether the website can know your location."

This information is from Customize settings for each website in Safari on Mac - Apple Support .

Similar questions

• Video isn’t playing on websites on Safari I just moved to a new computer and my old computer used to play videos right away when I opened a webpage. It’s not doing it now. 1004 2
• Safari - why so many bugs ? (YouTube etc.) I wonder why Safari continues to have so many bugs ? (unlike most other browsers) For example YouTube: 1) You can't play videos in 4 or 8k 2) Every now and then the video does not start, you have to reload the page 3) Every now and then video stops playback, you need to reload. Many websites do not show correctly (in other browsers yes) Why is this happening ? 1696 13
• videos not loading AFL.com webpage videos won't load on safari but will on chrome 293 1

Loading page content

Page content loaded

Oct 16, 2022 7:26 AM in response to ferreirex

Oct 8, 2022 7:12 AM in response to ferreirex

Hey there ferreirex, 

It sounds like you are having problems regarding autoplay and performance with some sites. You are able to change autoplay settings by following:

Stop autoplay videos in Safari on Mac

1. In the Safari app   on your Mac, choose Safari > Settings for This Website.

You can also Control-click in the Smart Search field, then choose Settings for This Website.

2. Hold the pointer to the right of Auto-Play, then click the pop-up menu and choose an option:

* Allow All Auto-Play:  Lets videos on this website play automatically.  

It may also be helpful to refer to the steps linked below to address issues with specific site functionality.

If Safari on Mac doesn't open a webpage or isn’t working as expected

Have a good one!

Oct 16, 2022 6:36 AM in response to Chris_C1

Thanks but still have the same troubles, I have activated for all the videos auto play.

In the next link it is an exemple the video doesnt start the auto play

https://www.awwwards.com/inspiration/art-direction-and-photograpy-portfolio

There is any option in the General Settings for the Safari work as brand new instalation? (just trying to make this and a few more things work as I wish)

How to fix HTML video issues in iOS Safari

HTML videos in iOS Safari seem to have unique behaviour compared to their Chromium & Firefox counterparts. While working through this issue, I found a few solutions to some painful problems.

• My video expands when scrolling

Add the playsinline attribute to your video element.

• My background video pauses if pressed

Style the video element with user-select: none; to prevent the video from being paused when clicked or pressed.

• canplaythrough does not trigger

I’ve yet to solve this issue, but a helpful StackOverflow question about the audio element may have some hints.

This post is mostly to document my troubleshooting for the inevitable future problems I face, so if I get around to solving it, I’ll update this section with a code snippet.

DEV Community

Posted on Oct 17, 2019

How to fix autoplay html5 video on iOS?

If you have used Javascript to play an html5 video, you may encounter some errors, including this error:

or permission errors.

The reason is that browsers in recent years changed their policies to prevent autoplay video because they think users don't want it (that's correct in most cases).

What we can do to solve this issue?

• Add autoplay , muted and playsinline attributes to your <video> element.
• If you need sound, you should put an unmute button beside the video, then in onClick callback, get video element and set muted = false by Javascript.

Pro Tip! If you have multiple videos on your page and only a single unmute button, then make sure to unmute all videos in the click callback of that button, otherwise, iOS won't let you unmute video before playing it on demand.

That's it, happy autoplaying!

Top comments (2)

Templates let you quickly answer FAQs or store snippets for re-use.

• Joined Aug 18, 2020

What if I don't want the video to autoplay?

• Joined Sep 4, 2019

In that case just don't add autoplay attribute to the video tag. Adding autoplay="false" or autoplay="true" are equal and will autoplay the video.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

What's the practical benefit of using <section>?

Talia - Aug 22

Building a Age Calculator Website

Abhishek Gurjar - Aug 9

Get Window Size in Pure CSS

Leapcell - Sep 1

Create a Simple Blog App Using Jstack (Nextjs, Neon, Prisma, Tailwind)

Vuelancer - Sep 10

We're a place where coders share, stay up-to-date and grow their careers.

SAVE 70% ON ALL OF OUR APPS

How to Fix HTML5 Video Autoplay Issues in Safari and iOS Devices

Table of contents, introduction, the issue with html5 video autoplay, essential html5 video attributes, implementing the solution, best practices for cross-browser compatibility.

Have you ever tried to autoplay an HTML5 video on your website, only to find that it works fine in some browsers but not in others? If you're frustrated that your videos aren't playing automatically on Safari or iOS devices, you're not alone. The autoplay functionality is particularly tricky when it comes to these platforms. Here's why: Apple has implemented stringent autoplay policies aimed at improving user experience and saving bandwidth on mobile data. As a result, video autoplay does not behave the same way on Safari and iOS as it does on other browsers.

This blog post aims to demystify the autoplay quirkiness of HTML5 videos in Safari and iOS devices. By the end of this article, you'll know exactly how to set up your HTML5 video tags to ensure smooth and seamless autoplay on all browsers, including Safari and iOS. Let's dive in and explore the intricacies and solutions to this common problem.

Why Safari and iOS Handle Autoplay Differently

Safari and iOS handle autoplay differently because Apple prioritizes user experience and bandwidth efficiency. Autoplaying videos can consume a lot of data, drain battery life, and sometimes disrupt a user’s experience by playing audio unexpectedly. As a solution, Apple enforces certain conditions that must be met for videos to autoplay. Understanding these conditions is the first step in solving your autoplay problems.

The Three Essential Attributes

For an HTML5 video to autoplay in Safari and on iOS devices, the video tag must include three essential attributes:

playsinline

Without these attributes combined, the autoplay functionality is likely to fail. Let’s break down these attributes to understand their significance.

The playsinline attribute ensures that the video will play inline within the webpage instead of taking over the entire screen on mobile devices. This is crucial for maintaining the layout integrity of your webpage while autoplaying videos.

The autoplay attribute is straightforward – it tells the browser to start playing the video as soon as it can do so, without waiting for the user to initiate the playback manually. However, in Safari and iOS, just having the autoplay attribute is not sufficient.

The muted attribute is critical because Safari and iOS generally disallow videos with sound from autoplaying unless they are muted. This policy helps ensure that users do not experience sudden noise from a video they did not explicitly choose to play.

To ensure that your HTML5 video autoplays across all browsers, including Safari and iOS devices, you should structure your video tag as follows:

This basic structure aligns with the requirements set by Safari for video autoplay.

Preloading Video Content

While autoplay can be beneficial, it’s also important to preload the video content to optimize performance. Use the preload attribute to control how much of the video is preloaded before the user interacts with it.

There are three possible values for the preload attribute:

• auto : The browser loads the entire video when the page loads.
• metadata : Only metadata (such as video duration) is loaded.
• none : The video is not preloaded at all.

Handling User Interactions

If your video must autoplay with sound, consider initiating playback through a user interaction, such as a button click. This not only ensures that sound will play but also complies with user-initiated media playback policies on Safari and iOS.

Fallback Content

Always provide a fallback message in case the browser does not support the video tag.

This ensures that users still receive a meaningful message rather than a broken interface.

Ensuring HTML5 video autoplay works seamlessly across all browsers is a challenge but not insurmountable. By making sure to include the playsinline , autoplay , and muted attributes in your video tags, you can meet the autoplay requirements of Safari and iOS devices. Additionally, adopting best practices like preloading video content and utilizing user interactions when necessary can further enhance the user experience.

Autoplay should not be an obstacle but rather a feature that, when used correctly, enhances user engagement. So, tweak your video tags, follow the guidelines, and offer an uninterrupted, cross-browser multimedia experience.

Why won’t my HTML5 video autoplay on Safari or iOS devices?

Safari and iOS have strict policies to ensure user experience and efficient use of bandwidth. Make sure your video tag includes the playsinline , autoplay , and muted attributes.

Can I autoplay videos with sound on Safari and iOS?

Videos with sound will not autoplay by default due to Apple’s policies. If sound is essential, prompt the user to start the video with a play button, and then disable the muted attribute.

What does the playsinline attribute do?

The playsinline attribute allows videos to play within the webpage layout rather than taking over the whole screen on a mobile device.

By following these tips and guidelines, you can ensure your HTML5 videos autoplay smoothly across all browsers, creating a better user experience on your website.

About Author

Haris James S. is a Paid Specialist at HulkApps, adept at both creating successful ad campaigns and dancing. When not fine-tuning customer-centered marketing strategies, he enjoys learning new dance moves to groove to.

Share this article on socials

Browse by apps.

• Product Options
• Form Builder

Recent Articles

Should web browsers be regulated, what the nba rights deal spells out about the future of streamers and platforms in live sports, enjoyed this article.

Get our news and insights delivered directly to your inbox.

• ${ option.name }: ${ option.value }

${item.properties['show_per_month']} x 12

Your cart is currently empty.

0 && cart_item_type_count.item_other_count Checkout Checkout --> Checkout

Before you continue.

Please share a few essential pieces of information that'll help our support members work quickly on your project

Thank you for your patience:

As soon as we review your idea, we'll give you an update. Please notice that any access to the product(s) or service offered by HulkApps does not count for a refund. However, should you experience problems with your order, we urge you to reach out to our dedicated support team .

Rising to serve you better, we are delighted to announce that PlanetX has been acquired by HulkApps, a Chicago-based leading Shopify agency. The combination of HulkApps Shopify services and PlanetX's strong capabilities in the eCommerce industry will lead to continued growth for both companies.

Oops! Please check your cart.

Looks like your cart already has a lateral package please remove it to proceed., your wishlist.

• Move to cart

Add to wishlist

Choose your wishlist to be added

• Create New wishlist

Share List Via Email

Or share via.

Copy wishlist link to share

Subscribe and get alerts about your Wishlist

We will notify you on events like Low stock, Restock, Price drop or general reminders so that you don’t miss the deal

See Product Details

Are you sure you want to delete this wishlist?

Are you sure you want to delete selected wishlist products, out of stock products will be not move. are you want to move selected wishlist products, wishlist management page.

• This page allows you to manage and add wishlist items directly to the cart.
• Share your public wishlist on social media, through links, and via custom email.
• You can subscribe to get update about your wishlist items

You have been unsubscribed

You will no longer receive emails about wishlist activities from this store..

Fix HTML Video Autoplay Not Working

To optimise pages on this blog I recently replaced the animated GIFs with auto-playing videos. It required a couple tries to get it right, so here’s how it works.

The video below won’t autoplay.

To fix this we add the muted attribute, this will disable the audio, making the video less intrusive.

However the video above still won’t autoplay on iOS Safari, Safari requires us to add the playsinline attribute.

We can try to hack around these autoplay limitations with some JavaScript, but that will only work if the JavaScript is run as a result of a user action.

The code below won’t work, it will throw a warning in the developer console.

The play action below will work because the code runs as a result of a user action.

Press Play to play the first video on the page.

I share web dev tips on Twitter, if you found this interesting and want to learn more, follow me there

Or join my newsletter

Busy doing the newsletter subscribing.

Something went wrong, can you give it another go?

At PQINA I design and build highly polished web components.

Make sure to check out FilePond a free file upload component, and Pintura an image editor that works on every device.

Related articles

Typescript interface merging and extending modules, styling password fields to get better dots, how to prevent scrolling the page on ios safari 15.

HTML Video element, not working after iosSafari15 update

after update(ios15.0) of my iPhone12, video element on my website, what im using as video background of website has stopped working. all others browsers is working properly.

all i can see is white blank background instead of background video. it looks like video cannot be loaded or played.

can you recommend me some tips to fix that issue? thank you

Same issue here. Any news?

Same here, seems like iOS 15 has broken the <video> element, except for me, it is also broken on Chrome on iOS.

Also some extra info, if you apply a background: white; style (or any non-transparent colour, or image) to the <video> element, it will then be able to render the first frame of the video instead of showing nothing. In some cases it will continue to render the following frames only when the user is dragging their finger on the video element. As soon as the page stops moving, the video will freeze again.

Definitely seems like an iOS 15 bug to me.

I have had a similar problem. I suggest you check your CSS, in my case, passing a video from fixed to absolute position has corrected the problem.

I'm also noticing this issue. Applying the background color can get the first frame of the video to show, but I can't influence the playing otherwise.

I am noticing the same behavior on Mac OS (desktop) Safari 15. I can get the first frame of the video to show up if a background color is set on the element.

The video will not autoplay (despite having the correct attributes), but I did notice an unusual behavior: I can "scrub" the video by resizing the viewport (either resizing the window or resizing the web inspector drawer).

Same Problem here. Seems other People have the same Problem:

https://stackoverflow.com/questions/69554317/safari-15-0-video-element-position-fixed-not-working-on-page-load

https://stackoverflow.com/questions/69264516/safari-ios-15-video-issue

The only fixes i found so far:

• add Position fixed via JS after Page load
• reassign the src of the video tag via JS after Page load

Both solutions feel very dirty/hacky.

Any News? Apple that can't be. All other modern Browsers don't have that problem...

Same issue here are well, but am curious if this bug is only on videos with transparent backgrounds? I have a few videos on my site, but only getting this bug on the one with the transparent background. Considering the above hack is to add a background color to the video element, I wonder if theres any relation there.

I have the same issue. I can't get the tag to work on Safari Desktop, despite having no issues with every other browser. Workarounds here shouldn't be necessary. Apple need to provide a solution. The Apple documentation says that the video html tags work in Safari.

Also experiencing this issue. Any word on when/if it will be fixed?

Same issue here.

The <video> poster attribute is not showing since iOS 15.

Other 'hacks' mentioned here with CSS are no good for HLS video sources to 'display the first frame' before requesting playback.

Wow Apple keeps disappointing with this browser - so many bugs constantly reported.

I have found a work-around that works on my Macbook (haven't tested mobile Safari). With the same framerate as the video I update video.style.willChange alternating between "" and "transform". It's possibly a performance killer, so make sure you stop this with an intersection observer etc.

Same issue...tried all of the suggested workarounds and nothing working. For me, this seems to only be an issue with Safari and Chrome running on iOS 15

No solution till yet, I'm also facing the same issue.

I am developing a webpage and simple video tag makes the pages so laggy on ios browser (chrome/safari)...

Same issue.

Everything You Need to Know About HTML Video Autoplay

Judicial use is the secret sauce to HTML video autoplay.

Read more posts by this author.

Autoplay is a common feature associated with web video. It allows multimedia content to begin playing automatically on page load without user interaction. For scenarios where immediate playback is beneficial (think background videos, or product demonstrations), the autoplay attribute ensures a smooth and user-friendly experience – your users don’t need to interrupt their browsing of a product to click a "play" button somewhere off to the side.

In this blog post, we'll delve into the topic of autoplay, exploring how this feature has revolutionized online content delivery, the pitfalls to avoid, and pairing it with ImageKit to make autoplay an asset (and not an annoyance!) for your website.

HTML5 Video and the autoplay attribute

In the past, to achieve such automatic video playback, developers had to use JavaScript to manipulate the video player. With HTML5, you can simply set the <video> element’s autoplay attribute (a boolean value) to specify that the video should start playing on page load, without the user specifically requesting playback.

This is a streamlined API that eliminates the need for JavaScript, complex embedding techniques, or third-party plugins, making it easier than ever to add video content to your website.

We’ve covered the specifics of HTML5 video here , so read up on that as a refresher. This post is going to focus entirely on the technical aspects of autoplay.

The basic HTML5 structure for an auto-playing video looks like this:

What happens when you set the autoplay property to true? Now, the following series of checks will take place:

• “Is the page allowed to use autoplay ?” – This might be unintuitive, but simply including the autoplay attribute might not be enough, as most browsers have their own set of conditions to check if autoplay can be allowed. These include checking if the media has an audio track, if the user has interacted with the page yet, etc. We'll talk more about these checks in a later section.
• “Was the <video> element created during page load?” – As in, not inserted programmatically later. Again, this makes sense as a guardrail against malicious intent.
• “Has a large enough chunk of the video been downloaded to begin and continue playback?” – This doesn’t mean the entire video must be downloaded before it can begin, just the minimum chunk needed to play something , and then download the rest as it plays through to the end. Notably, this check does not take into account network interruptions or unexpected bandwidth changes in the middle of playback.

As long as all three are true, the video will begin to autoplay.

Fleshing out our snippet with CSS and the controls attribute to add basic video player controls, here’s what it would look like in action, on a real webpage. You can check out the full code at this CodeSandBox here.

What are the benefits of HTML video autoplay?

HTML video autoplay offers several benefits when used thoughtfully. Some of these include:

• Boosting Engagement with Content: Autoplay immediately draws the user's attention to a video when they land on a webpage, perfect for showcasing engaging, new, or featured content. For example, Netflix autoplays trailers for hot and happening movies and shows as soon as you arrive. Users get a taste of the content this way and continue watching, consider subscribing, or consider staying subscribed.
• Reducing Bounce Rates with Seamless Navigation : Autoplay allows users to preview video content without having to manually click "play." YouTube, for example, often auto-plays related videos right after you finish watching one. This keeps the user invested with a steady stream of multimedia content, and when users encounter more videos that match their interests, they are more likely to stay on the website for longer periods, reducing bounce rates.
• Promotions and Storytelling: On Amazon, you’ll often see bite-sized autoplaying videos as banners to announce limited-time discounts or special offers. Conversely, a website for a non-profit or charity might autoplay a video on their landing page that showcases testimonials or the impact of their work, invoking emotions, establishing trust, and encouraging support.
• Product Demos and Tutorials: E-commerce websites employ autoplay to showcase product demos or tutorials. As users navigate to a product page, an explainer video can begin showcasing the item in use, highlighting the product's features and benefits. This helps users make informed purchase decisions.
• Design and Aesthetics: Autoplaying videos can run in silent background loops that add a dynamic and aesthetic element to your website. Consider a fashion brand's website with a subtle, looping animation of models walking down the runway, creating an aesthetic consistent with the brand. Or, autoplaying videos integrated into parallax scrolling, creating an immersive effect as users scroll down the page.

While autoplaying videos offer several advantages, it is critical to tread carefully with their implementation . If overused, or not correctly implemented, autoplay can actively harm the user experience (and accessibility) instead of enhancing it, and become disruptive and annoying. On mobile devices, misuse of autoplaying videos is even more intrusive due to limited screen real estate.

Moreover, there’s the issue of unoptimized, full-quality videos on autoplay that burn through data and battery, leading to slow loading times and lower PageSpeed Rankings.

To prevent this, consider using autoplay only in specific situations - where it adds value, such as for video previews, product showcases, or promotions. Judicial use is the secret sauce to autoplay.

Browser compatibility for HTML5 Autoplay

Most modern web browsers support the HTML video autoplay attribute. However, the behavior of autoplay may vary depending on the browser, and you need to meet certain conditions for it to work consistently.

First of all, here’s the current state of popular browser compatibility for the HTML5 autoplay attribute.

Data: HTML element: video: autoplay | Can I use... Support tables for HTML5, CSS3, etc

Secondly, it’s imperative to note that autoplay policies have evolved to enhance user experience and prevent intrusive or data-consuming behavior. Autoplay policies are different for each browser.

• User Interaction: Autoplay with sound is permitted on domains where the user has previously interacted.
• Previous Media Playback: If the user has played a video with sound on an active tab before, autoplay with sound is allowed.
• Mobile Engagement: For mobile users, if they have added the site to their home screen or installed the site’s Progressive Web App (PWA), autoplay with sound is permitted.
• Media Engagement Index (MEI): Chrome uses a metric called the Media Engagement Index to determine if videos should autoplay with sound. The MEI calculates this based on various factors, including the history of the user's interactions with media on the site.
• Mozilla Firefox : Firefox has a stricter autoplay policy. It generally blocks autoplay unless the audio is muted (or has its volume set to 0), the user has interacted with the site or the video element before, or the site has been explicitly whitelisted by the user.
• Apple Safari/Webkit : Apple’s policy uses an Automatic Inference Engine to block media elements with sound from auto-playing by default on most websites, but it gives granular control to users regarding whitelisting websites that are allowed to autoplay media content. Notably, Safari’s power saving mode prevents silent videos from autoplaying when hidden, in a background tab, or offscreen.
• Microsoft Edge : Starting with version 92, Edge follows a similar approach to Chrome, disabling autoplay with sound for all videos by default, while allowing some based on domains that users have interacted with previously.
• Opera : Opera's autoplay policy is the same as Chrome and Edge, being based on the same engine. It uses user interaction as a metric to determine whether a video should play with sound.

You should test on different browsers, and verify that your autoplaying videos work across them by taking account of the differences in browser behavior.

How to use HTML5 video autoplay with ImageKit?

ImageKit is an all-in-one, cloud-based, digital asset management solution that can perform real-time video (and image) optimization and transformation via a unique URL-based API that makes it easier to adapt your autoplaying videos for various devices and platforms. Then, with ImageKit’s global CDN, you can be sure they’re served from as close as possible to your users, letting you create seamless and interactive video experiences without getting caught up in the details.

Real-time Video Adaptation

One of ImageKit's standout features is its developer-friendly URL-based API. The API allows you to adapt videos on the fly – resizing, cropping, trimming, adjusting their quality in real time ( and more ) to suit different devices, screen sizes, and bandwidths.

Unoptimized, full-sized videos are the worst offenders when it comes to bad implementations of autoplay. To fix this, you’d normally need to create different variations of the same video, for different devices. With ImageKit, though, you avoid all of that work. Starting with a single source video, you can crop and resize them to pixel-perfect dimensions for different devices, or even different social media platforms – 16:9 for desktop viewers, square 1:1 for your mobile audiences or Instagram/Facebook feeds, or any arbitrary dimension based on your needs.

Simply add on the transforms you want to your video’s public URL, as query or path params. For example, here’s how easy it is to resize a source 1080p video to a 300px square one.

https://ik.imagekit.io/YOUR_ACCOUNT_NAME/YOUR_VIDEO.mp4?tr=w-300,h-300

Need a specific aspect ratio? Use the aspect ratio transform . This is for a 4:3 aspect ratio with a width of 480px.

https://ik.imagekit.io/YOUR_ACCOUNT_NAME/YOUR_VIDEO.mp4?tr=ar-4-3,w-480

What if you have a longer video and you want a short, looping snippet (say, starting at the 5-second mark, and lasting 5 seconds) to be played in a banner? You could use the trim transform.

https://ik.imagekit.io/YOUR_ACCOUNT_NAME/promo-2023.mp4?tr=so-5,du-5

Where so is the start time and du the duration, in seconds.

In fact, you could chain however many transformations you want to apply, in order, just like this.

Now, you can use this URL as the source wherever you want it to autoplay on your website or app.

ImageKit’s Transformation API proves invaluable for ensuring that your autoplay videos can be tailor-made for different user scenarios, devices, and platforms – all dynamically, and all from a single source video.

Automatic Video Format Conversion and Optimization

ImageKit automatically makes sure the most appropriate format for a given source video is served to your users – no matter which device or platform they’re consuming it from. All you need to do is turn on Automatic Format Conversion in the ImageKit dashboard and use the public URL to the video wherever you want, as usual. No need to manually create any variants yourself.

ImageKit can also automatically optimize video files to create a good enough balance between file size and image quality. This is a non-destructive process, and your source video is always intact. Again, this is another dashboard toggle – turn on Automatic Quality Optimization , tune the quality factor as desired, and you’re good to go.

Personalization and Enhancement

ImageKit's video transformation capabilities extend beyond basic optimization. You can personalize your videos by applying image, text, and video overlays, subtitles, and watermarks in multiple layers. For example, you can add your company's logo as a watermark to your autoplay videos, enhancing branding and engagement. Additionally, you can apply transforms even to these overlays you apply, to further tune them however you need.

HTML video autoplay is a powerful tool for enhancing user engagement and storytelling on your website, but you need to employ it judiciously, considering user preferences and ensuring the content aligns with your website's purpose. Consider some best practices like:

• Mute by Default : Mute your Autoplay videos (via the muted property) by default to prevent audio from startling or annoying users. If you use the loop attribute, ensure the video content is short in addition to being muted by default.
• Use ImageKit : Use ImageKit to dynamically optimize, transcode, and transform your video files to best fit your viewers’ devices, and your own needs. This ensures your viewers get the best quality at the best possible file sizes, reducing loading times and data usage.
• Inform Users: Communicate the presence of autoplay video on your website via a clearly visible container and play button. Then, delay the autoplay feature slightly to give users time to orient themselves on the page.
• Browser Compatibility: Test autoplay behavior across different browsers, as some may have specific policies or limitations on autoplaying videos. Also, test different autoplay strategies to see what works best for your specific audience.
• Don’t Ignore Accessibility : Provide descriptive alt text for the autoplaying video and captions (using the <track> element). This benefits users with visual or hearing impairments who rely on screen readers/text-to-speech.

Combining these autoplay strategies effectively with ImageKit, you can provide an enriched and dynamic web experience for your visitors, all while ensuring that your videos are optimized for performance and quality, and personalized to meet your unique requirements.

Remember that the key to success with HTML5 video autoplay is judicious usage and a user-friendly and responsible implementation.

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free

Autoplay guide for media and Web Audio APIs

Automatically starting the playback of audio (or videos with audio tracks) immediately upon page load can be an unwelcome surprise to users. While autoplay of media serves a useful purpose, it should be used carefully and only when needed. In order to give users control over this, browsers often provide various forms of autoplay blocking. In this guide, we'll cover autoplay functionality in the various media and Web Audio APIs, including a brief overview of how to use autoplay and how to work with browsers to handle autoplay blocking gracefully.

Autoplay blocking is not applied to <video> elements when the source media does not have an audio track, or if the audio track is muted. Media with an active audio track are considered to be audible , and autoplay blocking applies to them. Inaudible media are not affected by autoplay blocking.

Autoplay and autoplay blocking

The term autoplay refers to any feature that causes media to begin to play without the user specifically requesting that playback begin. This includes both the use of HTML attributes to autoplay media as well as the use of JavaScript code to start playback outside the context of handling user input.

That means that both of the following are considered autoplay behavior, and are therefore subject to the browser's autoplay blocking policy:

The following web features and APIs may be affected by autoplay blocking:

• The HTML <audio> and <video> elements
• The Web Audio API

From the user's perspective, a web page or app that spontaneously starts making noise without warning can be jarring, inconvenient, or off-putting. Because of that, browsers generally only allow autoplay to occur successfully under specific circumstances.

Autoplay availability

As a general rule, you can assume that media will be allowed to autoplay only if at least one of the following is true:

• The audio is muted or its volume is set to 0
• The user has interacted with the site (by clicking, tapping, pressing keys, etc.)
• If the site has been allowlisted; this may happen either automatically if the browser determines that the user engages with media frequently, or manually through preferences or other user interface features
• If the autoplay Permissions Policy is used to grant autoplay support to an <iframe> and its document.

Otherwise, the playback will likely be blocked. The exact situations that result in blocking, and the specifics of how sites become allowlisted, vary from browser to browser, but the above are good guidelines to go by.

For details, see the autoplay policies for Google Chrome and WebKit .

Note: Put another way, playback of any media that includes audio is generally blocked if the playback is programmatically initiated in a tab which has not yet had any user interaction. Browsers may additionally choose to block under other circumstances.

Autoplay of media elements

Now that we've covered what autoplay is and what can prevent autoplay from being allowed, we'll look at how your website or app can automatically play media upon page load, how to detect when autoplay fails to occur, and tips for coping when autoplay is denied by the browser.

The autoplay attribute

The simplest way to automatically play content is to add the autoplay attribute to your <audio> or <video> element, which sets the autoplay property on the element to true . When autoplay is true , the media will automatically begin to play as soon as possible after the following have occurred:

• The page is allowed to use autoplay functionality
• The element has been created during page load
• Enough media has been received to begin playback and continue to play through to the end of the media without interruption, assuming there are no dramatic changes in network performance or bandwidth.

Example: The autoplay attribute

An <audio> element using the autoplay attribute might look like this:

Example 2: Detecting whether autoplay is allowed

If autoplay is important for your application, you may need to customize behavior based on whether or not autoplay is allowed, disallowed, or only supported for inaudible content. For example, if your application needs to autoplay a video and you know that the page only allows the autoplay of inaudible content, you can either mute it or supply a video with no audio track. Similarly, if you know that autoplay is not allowed at all, you might provide a default image for the video (using the poster attribute), or choose to defer loading the video until it is requested.

The Navigator.getAutoplayPolicy() method can be used to check the autoplay policy for a type of media feature (i.e. all media elements, or all audio contexts) in a document, or to check whether a specific media element or audio context can autoplay.

The example below shows how you pass the mediaelement string to get the autoplay policy for all media elements in the document (pass audiocontext to get the policy for audio contexts). The code assumes video is an HTMLVideoElement media element using the <video> tag or HTMLVideoElement , and that it is configured to autoplay with audio by default. If autoplay is only allowed for inaudible content, we mute the audio; if autoplay is disallowed, we make sure that a placeholder image is displayed for the video.

The code to test a specific element or audio context is the same, except that you pass in the element or context to test rather than the type string. Here we pass in the video object we want to test.

The autoplay policy for a type may change due to user interaction with the site, page, or a particular element. Similarly, on some browsers the policy for a specific element might change even though the policy for the type has not (for example, on browsers where touching a particular element can allow just that element to autoplay).

As there is no way to be notified when the autoplay policy has changed (either for a type or element), generally we recommend that the policy is checked when the page is loaded, using the type.

Example 3: Detecting autoplay failure as a fallback

No specific event (or other notification) is triggered by autoplay success or failure, so browsers that do not support Navigator.getAutoplayPolicy() have no easy way to determine if autoplay is supported, or to react when it is triggered or not triggered.

One approach is to listen for the first instance of the play event, which is fired on the media element when is resumed after being paused and when autoplay occurs. That means that the first time the play event is fired, you know your media is being started for the first time after the page is opened,

Consider this HTML for a media element:

Here we have a <video> element whose autoplay attribute is set and with a play event handler set up; the event is handled by a function called handleFirstPlay() , which receives as input the play event.

handleFirstPlay() looks like this:

After getting a reference to the video element from the Event object's target , we use it to remove the event listener. This will prevent any future play events from being delivered to the handler. That could happen if the video is paused and resumed by the user or automatically by the browser when the document is in a background tab.

At this point, your site or app can begin whatever it needs to do that relies upon the video having been started up.

The play() method

The term "autoplay" also refers to scenarios in which a script tries to trigger the playback of media that includes audio, outside the context of handling a user input event. This is done by calling the media element's play() method.

Note: It is strongly recommended that you use the autoplay attribute whenever possible, because support for autoplay preferences are more widespread for the autoplay attribute than for other means of playing media automatically. It also lets the browser take responsibility for starting playback, letting it optimize the timing of that taking place.

Example: Playing video

This simple example plays the first <video> element found in the document. play() won't let the playback begin unless the document has permission to automatically play media.

Example: Handling play() failures

It's much easier to detect a failure to autoplay media when you use the play() method to start it. play() returns a Promise which is resolved once the media successfully begins to play, and is rejected when playback fails to begin (such as if autoplay is denied). When autoplay fails, you likely will want to offer a way for the user to manually tell the browser to ask the user to grant permission to play media.

You might use code like this to accomplish the job:

The first thing we do with the result of play() is make sure it's not undefined . We check for this because in earlier versions of the HTML specification, play() didn't return a value. Returning a promise to allow you to determine success or failure of the operation was added more recently. Checking for undefined prevents this code from failing with an error on older versions of web browsers.

If the promise returned by play() is resolved without error, the then() clause is run and can begin whatever needs to be done when autoplay has begun.

We then add a catch() handler to the promise. This looks at the error's name to see if it's NotAllowedError . This indicates that playback failed due to a permission issue, such as autoplay being denied. If that's the case, we should present a user interface to let the user manually start playback; that's handled here by a function showPlayButton() .

Any other errors are handled as appropriate.

If you want to start playing the video after the first interaction with the page, setInterval() might be used to achieve this:

Autoplay using the Web Audio API

In the Web Audio API , a website or app can start playing audio using the start() method on a source node linked to the AudioContext . Doing so outside the context of handling a user input event is subject to autoplay rules.

The autoplay Permissions Policy

In addition to the browser-side management and control over autoplay functionality described above, a web server can also express its willingness to allow autoplay to function. The HTTP Permissions-Policy header's autoplay directive is used to control which domains, if any, can be used to autoplay media. By default, the autoplay Permissions Policy is set to self , indicating that autoplay is permitted as they're hosted on the same domain as the document.

You can also specify an empty allowlist ( () ) to disable autoplay entirely, * to allow autoplay from all domains, or one or more specific origins from which media can be automatically played. These origins are separated by space characters.

Note: The specified Permissions Policy applies to the document and every <iframe> nested within it, unless those frames include an allow , which sets a new Permissions Policy for that frame and all frames nested within it.

When using the allow attribute on an <iframe> to specify a Permissions Policy for that frame and its nested frames, you can also specify the value 'src' to allow autoplay of media only from the same domain as that specified by the frame's src attribute.

Example: Allowing autoplay only from the document's domain

To use the Permissions-Policy header to only allow media to autoplay from the document's origin :

To do the same for an <iframe> :

Example: Allowing autoplay and fullscreen mode

Adding Fullscreen API permission to the previous example results in a Permissions-Policy header like the following if fullscreen access is allowed regardless of the domain; a domain restriction can be added as well as needed.

The same permissions, granted using the <iframe> element's allow property, look like this:

Example: Allowing autoplay from specific sources

The Permissions-Policy header to allow media to be played from both the document's (or <iframe> 's) own domain and https://example.media looks like this:

An <iframe> can be written to specify that this autoplay policy should be applied to itself and any child frames would be written thusly:

Example: Disabling autoplay

Setting the autoplay Permissions Policy to () / none disables autoplay entirely for the document or <iframe> and all nested frames. The HTTP header is:

Using the <iframe> 's allow attribute:

Best practices

Tips and recommended best practices to help you make the most of working with autoplay are offered here.

Handling autoplay failure with media controls

A common use case for autoplay is to automatically begin to play a video clip that goes along with an article, an advertisement, or a preview of the page's main functionality. To autoplay videos like these, you have two options: don't have an audio track, or have an audio track but configure the <video> element to mute the audio by default, like this:

This video element is configured to include the user controls (typically play/pause, scrubbing through the video's timeline, volume control, and muting); also, since the muted attribute is included, and the playsinline attribute that is required for autoplay in Safari, the video will autoplay but with the audio muted. The user has the option, however, of re-enabling the audio by clicking on the unmute button in the controls.

Browser configuration options

Browsers may have preferences that control the way autoplay works, or how autoplay blocking is handled. Here, any such preferences that may be of special significance or importance to you as a web developer are listed. These include any that may aid in testing or debugging as well as any that could be set in a way that you need to be prepared to handle.

A Boolean preference which specifies whether the non-standard HTMLMediaElement.allowedToPlay property is exposed to the web. This is currently false by default (except in nightly builds, where it's true by default). If this is false , the allowedToPlay property is missing from the HTMLMediaElement interface, and is thus not present on either <audio> or <video> elements.

This Boolean preference, if true , allows browser extensions' background scripts to autoplay audio media. Setting this value to false disables this capability. The default value is true .

A Boolean preference which if true (the default) allows audio media which is currently muted to be automatically played. If this has been changed to false , media with an audio track will not be permitted to play even if muted.

A Boolean preference that indicates whether to apply autoplay blocking to the Web Audio API . If false , web audio is always allowed to autoplay. If true , audio contexts are only able to play on pages once there has been Sticky activation . The default is set to true .

An integer preference which specifies whether per-domain configuration for autoplay support by default is allowed ( 0 ), blocked ( 1 ), or prompt-on-use ( 2 ). The default value is 0 .

A Boolean preference which controls whether detection of user gestures is allowed to override the setting of media.autoplay.default . If media.autoplay.default is not set to 0 (autoplay allowed by default), this preference being true allows autoplay of media with audio tracks anyway if the page has been activated by user gestures, and media that isn't audible is not restricted at all.

A Boolean preference which indicates whether media playback is blocked when started on a background tab. The default value, true , means that even when otherwise available, autoplay won't take place until after a tab is brought to the foreground. This prevents the distracting situation in which a tab begins playing sound and the user can't find the tab among all their tabs and windows.

• Web media technologies
• Video and audio content (Learning guide)
• Using the Web Audio API
• Cross-browser audio basics

Shopify themes, liquid, logos, and UX

• Shopify Community
• Shopify Discussion
• Shopify Design

HTML5 Videos do not work in Safari on Mac or iOS, but work fine in other browsers

• Subscribe to RSS Feed
• Mark Topic as New
• Mark Topic as Read
• Float this Topic for Current User
• Printer Friendly Page

• Mark as New
• Report Inappropriate Content

• Shopify Themes
• Troubleshooting
• All forum topics
• Previous Topic
• Next Topic Next topic

Community Blog Articles

By investing 30 minutes of your time, you can unlock the potential for increased sales,...

We appreciate the diverse ways you participate in and engage with the Shopify Communi...

Thanks to everyone who participated in our AMA with 2H Media: Marketing Your Shopify St...

• Português do Brasil

Safari User Guide

• Get started
• Go to a website
• Get highlights
• Bookmark webpages to revisit
• See your favorite websites
• Use tabs for webpages
• Hide distractions when browsing
• Apple Pay in Safari
• Apple Pay in third-party browsers
• Autofill credit card info
• Keep a Reading List
• Hide distractions when reading
• Translate a webpage
• Hide distractions when watching videos
• Download items from the web
• Add passes to Wallet
• Save part or all of a webpage
• Print or create a PDF of a webpage
• Interact with text in a picture
• Change your homepage
• Customize a start page
• Create a profile
• Block pop-ups
• Make Safari your default web browser
• Hide your email address
• Manage cookies
• Clear your browsing history
• Browse privately
• Prevent cross-site tracking
• See who tried to track you
• Change Safari settings
• Keyboard and other shortcuts

Stop autoplay videos in Safari on Mac

Some websites—and others who provide those sites with content, including advertisers—automatically play video when you visit their site. Muting tabs and windows is a quick and temporary solution, but you can permanently block video for an individual website or for all websites.

Open Safari for me

Block video for the currently displayed website

Hold the pointer to the right of Auto-Play, then click the pop-up menu and choose an option:

Allow All Auto-Play: Lets videos on this website play automatically.

Stop Media with Sound: Blocks autoplay for videos that contain audio, but allows other videos to play.

Never Auto-Play: Blocks autoplay for all videos on this website.

Block video for all websites

Choose Safari > Settings, then click Websites.

Click Auto-Play in the list on the left.

Do any of the following:

Choose settings for a website in the list: Select the website, then choose the option you want for it.

Choose settings for all websites that aren’t currently customized: Click the “When visiting other websites” pop-up menu, then choose an option.

You can see websites you’ve customized below Configured Websites. If you don’t see Configured Websites, either you haven’t customized a website yet, or you’ve cleared the list.

Choose settings for all websites: Make sure no websites are listed below Configured Websites (to clear the list quickly, select the websites, then click Remove). Click the “When visiting other websites” pop-up menu, then choose an option.