CODEWITHSUNDEEP
javascriptyoutube-iframe-api
JMD
JMD

Reputation: 318

YouTube Iframe API - video will sometimes not play via custom controls and instead, it refreshes the video

A bit of a strange one - I'm working with the YouTube iFrame API for the first time, building a skin for a customers site.

I've followed the code examples provided by Google/YouTube (https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#IFrame_Player_API).

The issue is that when clicking the play button, which calls player.playVideo(), under some circumstances it will play, but mostly, it just appears to refresh the video with no errors logged in the console. The video will fade to black as if it was about to play, but instead it fades back to the video "poster" with the play button.

You can view the entire code here - https://codepen.io/james-morton/pen/BEZGvm

I've tried various different things such as instead of using:

function onYouTubePlayerAPIReady() {

.. I tried this as per other examples to no avail

window.onYouTubePlayerAPIReady = function() {

Again, to be clear, the controls sometimes works, and sometimes it doesnt - same machine, same browser, same video - I've tried other videos and the same result. It's really inconsistent as it sometimes works.

Any ideas?

Edit:

After further debugging using the below:

function onPlayerStateChange(event){
  console.log('State Change: ' + event.data);
}

I can see that for when it doesn't load, the player's state has changed from -1 (Unstarted) to 3 (Buffering), and then back to -1 (Unstarted) when clicking the play button.

Upvotes: 3

Views: 2065

Answers (2)

JMD
JMD

Reputation: 318

It turns out the issue appears to be with CodePen - having transferred all of the code to my own environment, it works flawlessly with no playback issues via the controls.

Having reviewed https://css-tricks.com/play-button-youtube-and-vimeo-api/ that use a very similar setup, the problem was easily replicated on CodePen, and comments (all the way back from 2014) describe the issues that I experienced.

Hopefully this will be useful to others that spot this.

Upvotes: 2

Rachel Gallen
Rachel Gallen

Reputation: 28563

This is a strange one! I didn't quite 'solve' it but I have some feedback. On running your code, at first I couldn't get it to play at all (by either the middle 'YT' play button or by the custom play button), but when I used your 'ff' button (when it hadn't yet started to play), there was obvious signs that it had being activated. I changed the z-index in the yt-player from 2 to -2 and then was able to use the middle button to start play. After the initial play, I had no problem using the custom buttoms (pause/play worked fine) - and I refreshed and tried it multiple times, each time with success.

The one big issue is starting the first video play with the custom play button. You could maybe autostart it (perhaps with a delay?) to circumvent having to use the middle button? I did inspect the widths of the buttons (to see if maybe padding / overlap) may be affecting the play button but didn't find anything. I did notice that when I played the video that it was rising slightly from it's initial position so I tweaked the css a tiny bit (only a very slight tweak). Here's my codepen link (It's not that different from yours..) I hope this helps .. if even a bit.

Upvotes: 0

Related Questions