13

I have following starting setup:

var player;
function onYouTubeIframeAPIReady() {
   player = new YT.Player('player', {
      events: {
         'onReady': onPlayerReady,
         'onStateChange': onPlayerStateChange
      }
   });
}

Then in onPlayerReady handler I added event listener to button which is outside iframe:

function onPlayerReady(event) {
   button.addEventListener('click', () => event.target.playVideo());
}

In onPlayerStateChange I'm just logging what is happening:

function onPlayerStateChange(event) {
    console.log(event.data);
}

After hitting that button in Chrome (v.72.0.3626.119) there are 3 entries in console: -1 (UNSTARTED), 3 (BUFFERING), -1 (UNSTARTED). When I try to hit button again nothing happens. This works perfectly in Firefox, IE giving in console: -1 (UNSTARTED), 3 (BUFFERING),1 (PLAYING) and simply video starts playing.

Do you have any idea how to solve it?

1
  • 2
    I'm behind on my JS, but should there be curly brackets around event.target.playVideo() ? I'm having the same problem right now - it stopped working on code that has worked for years - so it might not be you. Edit: I think it's a Google problem. Even the demo page at developers.google.com/youtube/youtube_player_demo doesn't work. Edit 2: I also noticed that player.playVideo() is returning the Player object. The docs say it has no return (void).
    – John B
    Mar 1, 2019 at 20:11

3 Answers 3

15

You have to add in the onPlayerReady function this line:

event.target.playVideo();

As is shown in the documentation:

Example:

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
  event.target.playVideo();
}

I can't say for sure why, but, in Google Chrome, for autoplay the video, you need to set the value 1 to the mute parameter, otherwise, autoplay the video wont work.

Example:

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '360',
    width: '640',
    videoId: '<YOUR_VIDEO_ID>',
    playerVars: {
      'autoplay': 1,
      'loop': 1,
      'mute': 1 // N.B. here the mute settings.
    },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

You can check this jsfiddle for guide yourself how you can set custom controls for play/pause your embed video.

8
  • There is a playVideo() call in the original question. It's called when someone clicks a "play" button. Your fiddle exhibits the same behaviour that OP has: clicking the "play" link does nothing.
    – John B
    Mar 1, 2019 at 20:15
  • 3
    @JohnB it is because the video is not muted. In the linked jsfiddle, if you mute the video and press the "play" button, it will play/pause the video. Mar 1, 2019 at 21:13
  • 1
    That is absolutely it, thanks. I missed that in your answer. Sorry about the downvote - SO won't let me change it to an upvote.
    – John B
    Mar 1, 2019 at 21:17
  • @JohnB no problem at all and thank you for your kindness :) Mar 1, 2019 at 23:10
  • 1
    Mute parameter did the trick! Looks like it has to be set 1 now even on Firefox.
    – mMoovs
    Jan 23, 2020 at 11:37
1

I have sent a key after load html, and it works for me.

KeyEvent k = new KeyEvent();
k.WindowsKeyCode = 0x0D;
k.FocusOnEditableField = true;
k.IsSystemKey = false;
k.Type = KeyEventType.Char;
webytb.GetBrowser().GetHost().SendKeyEvent(k);
1
  • Uncaught ReferenceError: KeyEvent is not defined
    – vee
    Jul 17, 2021 at 19:56
0

From this answer, Google Chrome need the allow="autoplay" attribute on iframe to let JS controls the player or make auto play function work.

This is required if you manually use <iframe> instead of <div> tag.

Example:
Attention! Please note that it maybe not work if the result iframe of this site don't have allow="autoplay" attribute on iframe. Copy and paste HTML & JavaScript into your .html file is the best way to test that it is really working.

var player;


/**
 * Load YouTube API JavaScript
 */
function loadYTAPIScript() {
  console.log('loading YouTube script.');
  let tag = document.createElement('script');
  tag.src = 'https://www.youtube.com/iframe_api';
  firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}


/**
 * On YouTube iframe API ready
 * 
 * This function will be called automatically by YouTube.
 */
function onYouTubeIframeAPIReady() {
  console.log('function `onYouTubeIframeAPIReady` was called.');
  player = new YT.Player('player', {
    events: {
      'onError': onError,
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}


function onError(event) {
  console.error('YouTube API error!', event);
} // _onError


/**
 * On player ready.
 *
 * This is callback function from `onReady` event in `onYouTubeIframeAPIReady()`.
 */
function onPlayerReady(e) {
  console.log('function `onPlayerReady` was called from `onReady` event callback.', e);
  listClickButtons();
}


/**
 * On player state change.
 *
 * This is callback function from `onStateChange` event in `onYouTubeIframeAPIReady()`.
 */
function onPlayerStateChange(e) {
  console.log('function `onPlayerStateChange` was called from `onStateChange` event callback.', e);
  let state = e.target.getPlayerState();
  let stateText = '';
  if (state === -1) {
    stateText = 'unstarted';
  } else if (state === YT.PlayerState.ENDED) {
    stateText = 'ended';
  } else if (state === YT.PlayerState.PLAYING) {
    stateText = 'playing';
  } else if (state === YT.PlayerState.PAUSED) {
    stateText = 'paused';
  } else if (state === YT.PlayerState.BUFFERING) {
    stateText = 'buffering';
  } else if (state === YT.PlayerState.CUED) {
    stateText = 'cued';
  }
  console.log('State text: ', stateText);
}


/**
 * Listen on click buttons to controls the video.
 * 
 * This method was called from `onPlayerReady()`.
 */
function listClickButtons() {
  console.log('Listen click buttons.');
  let isPlayed = false;
  let playpauseBtn = document.getElementById('yt-playpause');
  let stopBtn = document.getElementById('yt-stop');
  playpauseBtn.addEventListener('click', (e) => {
    e.preventDefault();
    console.log('User click on play/pause button.');
    if (isPlayed === false) {
      player.playVideo();
      isPlayed = true;
    } else {
      player.pauseVideo();
      isPlayed = false;
    }
  });
  stopBtn.addEventListener('click', (e) => {
    e.preventDefault();
    console.log('User click on stop button.');
    player.stopVideo();
  });
}




document.addEventListener('DOMContentLoaded', (e) => {
  console.log('DOM ready.');
  loadYTAPIScript();
});
<iframe id="player" 
  width="560" height="315" 
  src="https://www.youtube.com/embed/1L904pgYbOE?enablejsapi=1" 
  title="YouTube video player" 
  allow="autoplay" 
  allowfullscreen=""
></iframe>
<!--
The `iframe` URL (`src` attribute) must contain enablejsapi=1 query string to let JS API work.
The `iframe` must contain `allow="autoplay"` attribute to allow JS controls the player.
-->


<div class="yt-controllers">
  <button id="yt-playpause" type="button">
    Play/Pause
  </button>
  <button id="yt-stop" type="button">
    Stop
  </button>
</div>

See full code on jsfiddle.

Reference:

  1. Iframe
  2. Iframe allow features list
  3. YouTube Iframe API

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.