{"action":"created","issue":{"url":"https://api.github.com/repos/alvarotrigo/fullPage.js/issues/2748","repository_url":"https://api.github.com/repos/alvarotrigo/fullPage.js","labels_url":"https://api.github.com/repos/alvarotrigo/fullPage.js/issues/2748/labels{/name}","comments_url":"https://api.github.com/repos/alvarotrigo/fullPage.js/issues/2748/comments","events_url":"https://api.github.com/repos/alvarotrigo/fullPage.js/issues/2748/events","html_url":"https://github.com/alvarotrigo/fullPage.js/issues/2748","id":235918665,"number":2748,"title":"YouTube API not responding as expected","user":{"login":"rredfearn32","id":7820108,"avatar_url":"https://avatars0.githubusercontent.com/u/7820108?v=3","gravatar_id":"","url":"https://api.github.com/users/rredfearn32","html_url":"https://github.com/rredfearn32","followers_url":"https://api.github.com/users/rredfearn32/followers","following_url":"https://api.github.com/users/rredfearn32/following{/other_user}","gists_url":"https://api.github.com/users/rredfearn32/gists{/gist_id}","starred_url":"https://api.github.com/users/rredfearn32/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rredfearn32/subscriptions","organizations_url":"https://api.github.com/users/rredfearn32/orgs","repos_url":"https://api.github.com/users/rredfearn32/repos","events_url":"https://api.github.com/users/rredfearn32/events{/privacy}","received_events_url":"https://api.github.com/users/rredfearn32/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-06-14T15:26:09Z","updated_at":"2017-06-14T15:43:40Z","closed_at":null,"body":"### Description\r\nThis is a messy one with several issues...\r\n\r\nI have a YouTube iFrame (managed by the YouTube JS API) in a Fullpage JS section. The video has been stretched to fill the entire section (height & width 100%). Some content in the other sections may be longer than the section height, which required me to enable the scrollOverflow for FullpageJS.\r\n\r\nWith the above set-up, I was not able to scroll away from the YouTube section, as the iframe seemed to be capturing the scroll event. So I created an 'overlay' div to cover the video and act as a 'surface' to scroll on. \r\n\r\nThe overlay div starts out displayed (in the JSFiddle below, I've coloured it red to better see it), then when you click it, it's hidden and the video starts playing. When the video is paused or ends, I want the overlay to reappear. I detect this with YouTube's onStateChange event listener. See line 11 of JSFiddle.\r\n\r\n**Now, the following error only happens on mobile platforms or in JSFiddle. On regular desktop (Chrome, Firefox, IE, etc) it behaves fine. But...**\r\n\r\nSomething in Fullpage seems to be interfering with YouTube's onStateChange event listener and stops it from firing. This means the overlay cannot be re-applied and you're left stranded on the video slide. It's definitely Fullpage, because if you remove the call to Fullpage on line 23 of JSFiddle, the event listener works fine and the overlay behaves as expected. Also, strangely, YouTube's onReady event listener fires just fine. Hmm..\r\n\r\nSo:\r\n\r\n1.) Anyone else come across this issue / a solution to it?\r\n2.) Am I going the right way about tackling the underlying \"scroll even captured by iframe\" problem with an overlay, or has anyone else found a better solution?\r\n\r\n### Link to isolated reproduction with no external CSS / JS\r\nReproduction of environment:\r\nhttps://jsfiddle.net/rredfearn32/phcwa63w/35/\r\n\r\nSite of original error: \r\nhttp://dev.oxplore.surge.online/question-detail/602\r\n\r\n### Steps to reproduce it\r\n1. When overlay is in place, scroll freely between slides.\r\n2. After you start playing a video, you are then unable to scroll away.\r\n3. When you pause the video, the overlay does not appear like it should.\r\n\r\n### Versions \r\nMobile Chrome on Android devices, JSFiddle"},"comment":{"url":"https://api.github.com/repos/alvarotrigo/fullPage.js/issues/comments/308472620","html_url":"https://github.com/alvarotrigo/fullPage.js/issues/2748#issuecomment-308472620","issue_url":"https://api.github.com/repos/alvarotrigo/fullPage.js/issues/2748","id":308472620,"user":{"login":"alvarotrigo","id":1706326,"avatar_url":"https://avatars0.githubusercontent.com/u/1706326?v=3","gravatar_id":"","url":"https://api.github.com/users/alvarotrigo","html_url":"https://github.com/alvarotrigo","followers_url":"https://api.github.com/users/alvarotrigo/followers","following_url":"https://api.github.com/users/alvarotrigo/following{/other_user}","gists_url":"https://api.github.com/users/alvarotrigo/gists{/gist_id}","starred_url":"https://api.github.com/users/alvarotrigo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/alvarotrigo/subscriptions","organizations_url":"https://api.github.com/users/alvarotrigo/orgs","repos_url":"https://api.github.com/users/alvarotrigo/repos","events_url":"https://api.github.com/users/alvarotrigo/events{/privacy}","received_events_url":"https://api.github.com/users/alvarotrigo/received_events","type":"User","site_admin":false},"created_at":"2017-06-14T15:43:40Z","updated_at":"2017-06-14T15:43:40Z","body":"> which required me to enable the scrollOverflow for FullpageJS.\r\n\r\nYour jsfiddle doesn't use scorllOverflow and I'm not able to reproduce the issue in the desktop version of Chrome.\r\nThe overlay appears as expected and I'm able to scroll down and up again."}}
{"actor":{"display_login":"alvarotrigo"}}