2

Note: It also works fine in the incognito window of Chrome browser and other browsers (like Mozilla) on Mobile.

It loads the video data successfully but when I try to play the video it shows me an error.

Run this code using local environment like vs-code etc.

This snippet works on a computer browser properly, but when I open the same page using IP on my mobile Chrome browser, I got an error, but it works in the incognito mode and other browsers too.

I don't know why it is behaving like this, It would be really helpful if anyone can rid of this.

Computer Chrome Browser[Working fine] enter image description here

Mobile Chrome Browser [Not Playing the video] enter image description here

//YouTube embed with YouTube Iframe API
var tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// YouTube embed player details
var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player("player", {
    height: "390",
    width: "640",
    videoId: "668nUCeBHyY",

    //Features
    playerVars: {
      controls: 0,
      rel: 0,
      disablekb: 1,
    },
  });
}

//functions
function playYT() {
  player.playVideo();
}

function pauseYT() {
  player.pauseVideo();
}
<div style="pointer-events:none" id="player"></div><br><br>
<button onclick="playYT()">Play</button>
<button onclick="pauseYT()">Pause</button>
Brijesh Kalkani
  • 789
  • 10
  • 27

2 Answers2

0

I am using Live Preview extension for the previews in browser. You need change default(127.0.0.1) IP address in the extension settings to be able see the pages on other devices: enter image description here

If you are using Live Server extension then change following setting: enter image description here

If you just want to host the files without VSCode then you can use http-server tool. It is a simple, zero-configuration command-line static HTTP server. All you have to do is provide it the folder path and it'll host all the files in it.

If you are facing any other issue then let us know the exact error and the browser you are using on mobile.

the Hutt
  • 16,980
  • 2
  • 14
  • 44
  • I'm using the same configuration which you have suggested. So let me update the question, so other guys can take different approaches and solutions. – Brijesh Kalkani Feb 07 '22 at 16:35
  • It is working fine on my android phone. There is a [way](https://www.damirscorner.com/blog/posts/20180615-ViewingConsoleLogFromAnAndroidDevice.html) to see android browser console logs. Or try [this](https://stackoverflow.com/a/50773729/15273968). Just speculating, from the gif it looks like the wifi strength is low check if the speeds are [sustainable](https://support.google.com/youtube/answer/3037019?co=GENIE.Platform%3DAndroid&oco=1#zippy=%2Cmobile-site%2Cyoutube-app%2Cinternet-speed) – the Hutt Feb 08 '22 at 08:49
0

Disable all of your browser extensions

I known is sounds like a simple answer but try it. This happens to me all the time. Probably one or more of you browser extensions is blocking the Youtube imbedded iframe from showing for more security or privacy. I know that Blocksi extension for Chrome blocks Youtube embeds. enter image description here

JPH2
  • 54
  • 7