I’ve been battling with the youtube iframe api for quite some time now. Somehow the method onYouTubeIframeAPIReady is not always triggered.<\/p>\n
From the symptoms it seems a loading problem. No errors are shown in the inspector.<\/p>\n
Here is my code:<\/p>\n
html<\/p>\n
\n \n videoId = 'someVideoId';\n var tag = document.createElement('script');\n tag.src = \"\/\/www.youtube.com\/iframe_api\";\n var firstScriptTag = document.getElementsByTagName('script')[0];\n firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\n \n<\/code><\/pre>\njs (called at the end of the page. I tried to place the code right after the above script and the result was the same.)<\/p>\n
var isReady = false\n , player\n , poster\n , video;\n\n$(function () {\n$('.js-play').click(function (e) {\n e.preventDefault();\n interval = setInterval(videoLoaded, 100);\n });\n});\nfunction onYouTubeIframeAPIReady() {\n console.log(videoId)\n player = new YT.Player('player', {\n height: '445',\n width: '810',\n videoId: videoId,\n events: {\n 'onReady': onPlayerReady\/\/,\n \/\/'onStateChange': onPlayerStateChange\n }\n });\n}\n\nfunction onPlayerReady(event) {\n isReady = true;\n console.log(\"youtube says play\")\n}\n\nfunction videoLoaded (){\n if (isReady) {\n console.log(\"ready and play\")\n poster.hide();\n video.show();\n\n $('body').trigger('fluidvideos');\n\n player.playVideo();\n clearInterval(interval);\n } \n}\n<\/code><\/pre>\nThe problem is that sometimes nothing gets printed by the console.log and nothing happens.<\/p>\n
On mobile phones this happens all the time. Any ideas?<\/p>\n","protected":false},"excerpt":{"rendered":"
I’ve been battling with the youtube iframe api for quite some time now. Somehow the method onYouTubeIframeAPIReady is not always triggered. From the symptoms it seems a loading problem. No errors are shown in the inspector. Here is my code: html videoId = ‘someVideoId’; var tag = document.createElement(‘script’); tag.src = “\/\/www.youtube.com\/iframe_api”; var firstScriptTag = document.getElementsByTagName(‘script’)[0]; […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-6011","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/6011","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=6011"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/6011\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=6011"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=6011"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=6011"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}