CODEWITHSUNDEEP
javascripthtmliframe
Muhammad Haroon Iqbal
Muhammad Haroon Iqbal

Reputation: 552

Uncaught TypeError: Cannot read property 'stopVideo' of undefined

I have below code for Youtube API player. I defined functions i.e. playVideo, stopVideo etc. But it gives an error of undefined functions.

After a lot of research, I am still unable to figure out this error.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Videos</title>
<script src="jquery-3.1.1.js"></script>
<script src="script.js"></script>


</head>
<body>
<div id="player">
  <iframe id="player" width="560" height="315" src="https://www.youtube.com/embed/sGPrx9bjgC8" frameborder="0" allowfullscreen></iframe>
   <br/>
  <a href="javascript:void(0);" onclick = "playVid()">Play</a>||
  <a href="javascript:void(0);" onclick = "stopVid()">Stop</a>||
  <a href="javascript:void(0);" onclick = "muteVid()">Mute</a>||

  </div>
</body>
</html>

**script.js**

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
tag.scr = "https://s.ytimg.com/yts/jsbin/www-widgetapi-vflioRwVn/www-widgetapi.js";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;

window.onYouTubeIframeReady = function(){
   player = new YT.Player('player', {
       videoId: 'sGPrx9bjgC8',
       events: {
           'onReady' : onPlayerReady,
       }
   } );
}

function onPlayerReady(event){
    event.target.playVideo();
}

function playVid(){
    player.playVideo();
}

function stopVid(){
    player.stopVideo();
}

function muteVid(){
    player.mute();
}

Here is my erorrs

Upvotes: 1

Views: 4865

Answers (2)

SatyaDash
SatyaDash

Reputation: 190

Try this one.It worked for me.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Videos</title>
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
<script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>

<script type="text/javascript">
var tag = document.createElement('script');
tag.src = "https://s.ytimg.com/yts/jsbin/www-widgetapi-vflioRwVn/www-widgetapi.js";
tag.setAttribute('onload','onYouTubeIframeReady()');
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;

window.onYouTubeIframeReady = function(){
     player = new YT.Player('player', {
         videoId: 'sGPrx9bjgC8',
         events: {
             'onReady' : onPlayerReady,
         }
     } );
}

function onPlayerReady(event){
    event.target.playVideo();
}

function playVid(){
    player.playVideo();
}

function stopVid(){
    player.stopVideo();
}

function muteVid(){
    player.mute();
}
</script>

</head>
<body>
  <div id="player">
    <iframe id="player" width="560" height="315" src="https://www.youtube.com/embed/sGPrx9bjgC8" frameborder="0" allowfullscreen></iframe>
    <br/>
  </div>
  <div>
    <a href="javascript:void(0);" onclick = "playVid()">Play</a>||
    <a href="javascript:void(0);" onclick = "stopVid()">Stop</a>||
    <a href="javascript:void(0);" onclick = "muteVid()">Mute</a>||
  </div>
</body>
</html>

Upvotes: 2

Uzbekjon
Uzbekjon

Reputation: 11813

Apparently, your player variable is not set to YT object as you are expecting.

  1. You might be calling the PlayVid() function before the onYouTubeIframeReady callback happens.
  2. Another issue in your code is the fact that you are using the same id="player" name for more than one element on your page. Please, rename your div's id to something else.

For example:

<div id="player-wrapper">
  <iframe id="player" width="560" height="315" src="..."

Upvotes: 0

Related Questions