youtube iframes api
Esse código é totalmente dependente dos polyfill de
- Array forEach
- Array Map
- Array Filter
Não se esqueça de adiciona-los a implementação!!!
var iframe = document.querySelector('iframe')
if (iframe.src.indexOf('?') < 0) {
iframe.src += '?enablejsapi=1'
}
else {
iframe.src += '&enablejsapi=1'
}
function onYouTubeIframeAPIReady() {
var p = new YT.Player(iframe)
p.addEventListener('onStateChange', function(event){
console.log('onStateChange', arguments)
})
}
var script = document.createElement('script')
var ref = document.getElementsByTagName('script')[0]
script.id = 'api-youtube-iframe'
script.src = 'https://www.youtube.com/iframe_api'
ref.parentNode.insertBefore(script, ref)
(function(window, document){
/** FUNÇÕES **/
var enableAPI = function(iframe) {
if (iframe.src.indexOf('?') < 0) {
iframe.src += '?enablejsapi=1'
}
else {
iframe.src += '&enablejsapi=1'
}
return iframe
}
var onStateChange = function (event) {
//implementar eventos de GA
console.log('onStateChange', arguments)
}
var insertAPIScript = function () {
var script = document.createElement('script')
var ref = document.getElementsByTagName('script')[0]
script.id = 'api-youtube-iframe'
script.src = 'https://www.youtube.com/iframe_api'
ref.parentNode.insertBefore(script, ref)
}
var createPlayers = function(yt_iframes) {
yt_iframes.forEach(function(iframe) {
var p = new YT.Player(iframe)
p.addEventListener('onStateChange', onStateChange)
})
}
var findForYoutube = function() {
var iframes = document.getElementsByTagName('iframe')
return iframes.filter(function(iframe) {
return iframe.src.indexOf('youtube') > -1
})
}
window.onYouTubeIframeAPIReady = function onYouTubeIframeAPIReady() {
createPlayers(findForYoutube().map(enableAPI))
}
/** TAGUEAMENTO **/
insertAPIScript()
})(window, document)