Playing embedded YouTube videos automatically in Safari 11 without user interaction

I’m encountering an issue with a simple modal dialog:

  • When a user clicks on a button, the modal overlay appears.
  • An embedded YouTube <iframe> is then added.

Everything works smoothly in most browsers, except for Safari 11.1.

Safari’s new auto-play policy now requires a direct click and explicit action for video playback to start:

Is there a workaround to enable autoplay for dynamically inserted YouTube (or Vimeo) iframes?

A sample YouTube iframe code snippet is provided below:

<iframe frameborder="0" allowfullscreen="" allow="autoplay; encrypted-media; fullscreen" src="https://www.youtube-nocookie.com/embed/20iMzRklHNU?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;enablejsapi=1"></iframe>

Answer №1

Safari 11 has made a new update that disables autoplaying videos. Users now have to navigate to Safari settings and manually enable the option to Allow All Auto-Play for specific sites only.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looking for assistance in showcasing information retrieved from an external API

I've been working with an API and managed to fetch some data successfully. However, I'm having trouble displaying the data properly in my project. Can anyone provide assistance? Below is a screenshot of the fetched data from the console along wit ...

Tips for providing the URL in JSON using Spring MVC

Every time I try to run my code, I encounter an issue where I cannot access the URL specified in the getJSON function. Below is my controller code: @RequestMapping(value = "branch") @Controller public class BranchController { @Autowired(required = true) ...

setTimeout is only effective for durations less than 1000 milliseconds

I am trying to implement a timeout function that displays an alert two seconds after a form is submitted. The code I have tried using does not seem to be working as expected: $(document).ready(function() { $("#newsletter").submit(function() { setTi ...

Transform the JSON object into a different JSON format

I am in the process of restructuring the JSON data which is currently organized by categories, with each category containing multiple locations. Each location consists of latitude/longitude coordinates and an area code: { "cat1":[ {"location":{ ...

What steps can be taken to avoid an abundance of JS event handlers in React?

Issue A problem arises when an application needs to determine the inner size of the window. The recommended React pattern involves registering an event listener using a one-time effect hook. Despite appearing to add the event listener only once, multiple ...

What is the process for importing the required dependencies for the maps module in react-svg-map?

Exploring interactive maps led me to discover the project react-svg-map. As I followed the example provided, a certain issue caught my attention: import Taiwan from "@svg-maps/taiwan"; The developers mentioned that they have separated the map&ap ...

Messages traced by log4javascript are not being displayed

I am currently utilizing log4javascript version 1.4.3. Everything in my application seems to be functioning correctly with all log levels except for trace. To simplify the troubleshooting process and ensure that the issue does not lie within my applicati ...

Guide to defining API elements in Bootstrap 5 modal

I have been struggling with this issue for quite some time. I am working on a movie app and trying to implement a modal feature. Currently, I am able to display each movie individually along with their poster, title, and score. The goal is to have the mod ...

Loop through the JSONP object to display its properties

When I receive this object through jsonp, it has the following structure: "item1": { "child1": { "nr": 123, "money": "USD", "Date": "12.12.2016, 17:00", "asw1": 13, "SpecialField" ...

Performing real-time arithmetic calculations on dynamic text input fields using AngularJS

In the process of creating a dynamic form, the number of textboxes is determined by the situation at hand. Each textbox is assigned an arithmetic formula, which is obtained from a database table. The structure of my form will be as follows: <div ng-ap ...

When running the command `npm install <node_module> --save`, the dependencies are not being updated as

<=== If you're facing the same issue, try reinstalling your computer to fix it ===> I recently had to reformat my computer and set everything up again. After reinstalling Node and NPM, I encountered some problems that are really irritating me. ...

The input given to Material UI autocomplete is incorrect, even though the getOptionSelect parameter already exists

I'm currently working on creating my own version of the Google Places autocomplete found in the Material UI documentation. While I have successfully implemented the autocomplete feature and am able to update my component's state with the result, ...

Replace or update the current array of objects that align with the incoming array

I've been struggling to figure out how to find and replace an array that matches the existing one. The issue lies with using the some method. Here is the current array: let existingData = [{ id: 1, product: 'Soap', price: ' ...

What is the best way to ensure that the larger child divs always fit perfectly within the parent div?

Creating a Responsive Layout <div class="container"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> CSS Styling .box1, .box2, .box3{ display: block; f ...

Just easy highlighting using tags in Javascript

I have come across a code snippet that seems to be functioning well: <html> <head> <title>Testing JS Highlighting</title> <script type="text/javascript"> function highlight() { var t = ...

The chosen options are not appearing. Could this be a problem related to AngularJS?

I am working on setting up a dropdown menu in HTML that includes only the AngularJS tag. This dropdown menu will be used to populate another AngularJS dropdown menu. Below is the code for the first dropdown menu: <select class="form-control" ng-model=" ...

Creating a duplicate of a Flex object in HTML without the need to reinitialize

I'm currently developing a flash object that involves processing a large number of images. My goal is to load multiple flash objects on the same page in order to capture an image, make adjustments, and then display it within each flash object. Howeve ...

How to retrieve values from a nested array in a Next.js application

I am diving into the world of nextjs and apollo for the first time, and I am currently facing a challenge with using .map to loop through database results. Below is the code for my component: import { gql, useQuery } from "@apollo/client" import ...

Is there a way to ensure a Javascript alert appears just one time and never again?

I struggle with Javascript, but I have a specific task that needs to be completed. I am participating in a school competition and need an alert to appear only once throughout the entire project, not just once per browsing session. The alert will inform ...

Allowing Cross-Origin Resource Sharing on an Express Server hosted using Firebase Cloud Functions

Hey there, I have a simple Express setup on Firebase, shown below: import { onRequest } from 'firebase-functions/v2/https'; import express from 'express'; import bodyParser from 'body-parser'; import router from './router ...