When attempting to watch a video on iOS using the YouTube embed player, clicking on the red button will not initiate playback

Just a quick question for you all.

I've encountered an issue with the Youtube player on my HTML website when trying to play videos on IOS devices. It seems that tapping on the red "play" button does not start the video, but tapping on the preview image does! Quite a strange occurrence.

If you want to test it out yourself, you can visit this link: https://developers.google.com/youtube/youtube_player_demo

Here's the code snippet I'm currently using:

var _player = new YT.Player('player', {
        height: '100%',
        width: '100%',
        videoId: id,
        playerVars: {
            controls:1,
            showinfo:0,
            modestbranding: 1
        },
        events: {
          'onReady': _onPlayerReady,
          'onStateChange': _onPlayerStateChange
        }
    });

Has anyone else experienced this bug before? And is there a way to fix it? Appreciate any help or suggestions. Thanks!

javascriptiosyoutube

Answer №1

An unconventional solution, not the most aesthetically pleasing, involves clicking on the lower part of the embedded content where the controls are displayed. Surprisingly, this specific area does register clicks on both iOS and Android devices, unlike the rest of the content area.

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

Using ReactJS and Hooks to update state after the .map() function

Trying to update the state using values from an array. Here is an example: const [state, setState] = useState({}); const test = [1, 2, 3]; test.map((item, i) => { setState({ ...state, [`item-${i}`]: item }); }); The current s ...

javascriptreactjsreact-hooks

Conceal a column within a table by double-clicking

I'm working on a project with a table, and I'd like to implement a feature where a column hides when double-clicked. I've seen various solutions for hiding columns on Stack Overflow, but I could use some guidance on where to add the ondblcli ...

javascriptcsshtml-tabledom-events

Encountering Issues While Parsing JSON Data

Below is the JSON string I currently have. The opening and closing brackets have been removed as I need to utilize the JSON values in jQuery to dynamically populate a select box: { "text": "Pediatric FA, CPR & AED (2015)", "id": "1281770000024 ...

javascriptjqueryjsonsyntax-error

The challenge of maintaining consistency in Vue 3 when it comes to communication between

Context In my Vue 3 application, there is a HomeView component that contains the following template structure: <InputsComponent></InputsComponent> <CheckboxesComponent></CheckboxesComponent> <Toolbar></Toolbar> T ...

javascriptvue.jsvuejs3

"In Typescript, receiving the error message "Attempting to call an expression that is not callable" can be resolved

I am in the process of creating a function that matches React's useState signature: declare function useState<S>( initialState: S | (() => S), ): [S, React.Dispatch<React.SetStateAction<S>>]; Below is an excerpt from the functi ...

javascripttypescript

Ways to retrieve a variable from outside of a function

I am in need of sending the following batch data to the database, but I am facing difficulties in including the course_id along with the batchData. Currently, I am retrieving the course_id from another service that fetches data from a course table. I am ...

javascriptangularjsangularjs-scope

What is the issue with this code and why am I not receiving any error messages?

I am new to JavaScript and decided to do some practice. I wanted to create a webpage that allows users to select the number of products they want to buy, using plus and minus buttons. The program was supposed to increment or decrement the input value based ...

javascripthtmlcssweb

Musical backdrop for an online game platform

Currently, I am working on developing a game using HTML. I am trying to figure out the best way to incorporate music into the gameplay. Any suggestions on how I can add music to my web-based game? ...

javascripthtmlaudio

Refresh the Express Server following the file upload

This is a simple express server setup that includes file uploading and reading functionality. const express = require("express") const fileUpload = require("express-fileupload") const cors = require("cors") const morgan = require("morgan") const fs = requi ...

javascriptnode.jsexpressserver

[Protractor][Internet Explorer 11]-->I am facing an issue where clicking on a link does not open a new tab even though I have configured the IE browser settings properly

For example: ele.click(); is able to open a new tab in Chrome and Firefox, but not in IE11. However, if I manually click the link, it will open a new tab in IE11. Can someone explain why this is happening? What steps should I take to resolve it? Thank y ...

javascriptinternet-explorerseleniumselenium-webdriverprotractor

Adding retrieved ejs elements

Aim: I am struggling with a button that triggers a function to fetch more items from my Mongoose DataBase and display them in a table row dynamically. I am using the get method to retrieve data from the server side. Despite referring to advice from this po ...

javascriptexpressappendejsfetch-api

Move object remains fixed at specific distance/radius from camera perspective

In my current setup, there is a camera positioned in the center of the scene. There is also a sphere located at a distance of z=400 from the camera, with its parent object situated in the center as well. My goal is to be able to manipulate the sphere by d ...

javascript3dthree.js

Create an Angular directive that dynamically adds a template to a textbox when the Spacebar or enter key

Using AngularJS, I aim to display an HTML table in a textbox when the spacebar is pressed, and add the table element to the textbox. To achieve this, I have created a directive, but I am unsure if I have followed the correct approach. Let me provide a deta ...

javascriptjqueryhtmlangularjsangularjs-directive

Node.js Express API returns an error status with an empty array response in a RestFul manner

Currently, I am in the process of developing a RestFull API using Node.JS to validate if a specific license plate is registered in my database (which happens to be MySQL). The endpoint that I have set up for this task is as follows: http://localhost:3009/_ ...

javascriptnode.jsrestexpress

The JavaScript closing tag is being duplicated by the PHP echo function

<?php echo "<script type = 'text/javascript'></script>"; ?> Upon inspection of the page source, an additional closing tag is being added: <script type = 'text/javascript'></script></script> I ...

javascriptphptags

Using node.js version 10.0.0 to tinker with gulp

I was working on a node.js api project that functioned perfectly with node.js v8.1.4 & npm v5.0.3. However, upon transitioning to node.js v10.0.0 & npm v5.6.0, I encountered the following error: [email protected] ecosystem E:\opensource& ...

javascriptnode.jsnpmgulppm2

Steps for transforming an array of file names into JSON format and including a specific key

I am in the process of creating a new website that will display all the files contained in a specific folder. However, I am facing an issue with converting an array of document names into JSON format. In order to achieve this, I understand that I need to ...

javascriptnode.jsjsonexpressfs

creating a distinct angular service for every controller

Lately, I've been utilizing Angular services to store my commonly used codes that are required across different parts of my project. However, I have encountered an issue where variables in the service are shared between controllers. This means that if ...

javascriptangularjs

Difficulty dealing with Firestore using get() followed by add()

Recently started learning Vue.js and Firestore, facing a challenge with what should be a simple task. 1) I am trying to fetch default values from an existing template document in my Firestore database. 2) The goal is to use these default values to create ...

javascriptvue.jsgoogle-cloud-platformgoogle-cloud-firestore

What is the best way to upgrade to a specific version of a child dependency within a module?

npm version: 7.24.2 Looking for assistance on updating a child dependency. The dependency in question is: vue-tel-input This dependency relies on libphonenumber-js with version ^1.9.6 I am aiming to update libphonenumber-js to version ^1.10.12. I have ...

javascriptvue.jsnpmversionvue-tel-input