2

I've been using Popcorn.js with YouTube videos successfully for a while. Starting recently, on a mobile browser (in my case on iPad 2) the "Play" button doesn't appear as it did in the past. The video will start to load, you can see the title, but then instead of a prominent "Play" button you get a black screen with a miniscule white dot in the center. After checking the source code, it seems that the video inside the iFrame's video wrapper is picking up a CSS style that gives the video a height of 1px.

If you press that barely visible dot the video will play and the Popcorn code will execute fine. That is pretty much a deal-breaker. Maybe this is a YouTube thing and not a Popcorn.js thing, but I'm just looking for direction.

See this simple jsfiddle, based on one of the Popcorn.js examples, for an example: http://jsfiddle.net/Nzhpa/1/

The code: 

var pop = Popcorn.smart("#container", "http://youtu.be/vDvmsTECAk4");

pop.footnote({
    start: 1,
    end: 5,
    text: "Works with youtube!",
    target: "footnote-div"
});

pop.play();
consuela
  • 1,675
  • 6
  • 21
  • 24
Joel
  • 647
  • 2
  • 11
  • 22

2 Answers2

0

It's the autoplay which breaks it on ipad.

In the 

/popcorn-js/wrappers/youtube/popcorn.HTMLYouTubeVideoElement.js

in the onPlayerReady function (around line 108) some tricks are done for autoseek & mute for initial loading. The player.playVideo(); in that function breaks it for the iPad because the youtube API does not allow autoplay on iPad. It should always start with a user interaction

If you comment the player.playVideo(); line it works (for me).

I'm not sure if this breaks other things yet. I will see if I can file an issue at popcorn about this.

wessel
  • 810
  • 8
  • 10
  • sorry wessel, just saw this here. Thanks for the info. I've kind of given up trying to use popcorn in the mobile browsers--but I would certainly welcome any improvements we could get. – Joel Jan 03 '14 at 04:46
0

I regularly set the "controls" param to 2 to benefit from the speed boost but in PopcornJS, it tends to cause problems. Try forcing your "controls" param to "1".

http://www.youtube.com/watch?v=videoid&controls=1

Chris M
  • 316
  • 3
  • 9