ortense
6/23/2016 - 6:54 PM

youtube iframes api

youtube iframes api

Passo a passo para taguear YouTube

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!!!

Habilitando a API js no video


var iframe  = document.querySelector('iframe')

if (iframe.src.indexOf('?') < 0) {
    iframe.src += '?enablejsapi=1'
}
else {
    iframe.src += '&enablejsapi=1'
}

Ativar listeners


function onYouTubeIframeAPIReady() {

    var p = new YT.Player(iframe)

    p.addEventListener('onStateChange', function(event){
        console.log('onStateChange', arguments)
    })

}


Adicionar a api na pagina


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)


como fazer a parada funcionar ?

(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)