Vimeo is not defined

Question

I have this errors in console.log.

jQuery.Deferred exception: Vimeo is not defined ReferenceError: Vimeo is not defined
    at HTMLDocument.<anonymous> (http://unisoft.local/js/scripts.min.js:1:18238)
    at j (http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:2:29999)
    at k (http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:2:30313)

Uncaught ReferenceError: Vimeo is not defined
    at HTMLDocument.<anonymous> (scripts.min.js:1)
    at j (jquery.min.js:2)
    at k (jquery.min.js:2)

The code is: js file:

var vimeoBanner = $('#vimeo-banner');

    if (vimeoBanner[0]) {
        var vimeoPlayer = new Vimeo.Player(vimeoBanner[0]);
        vimeoPlayer.setVolume(0.2);
        vimeoPlayer.setLoop(false);
        if (firstVisit) {
            vimeoPlayer.play();
        }
    }

and html:

<div class="video-banner">
    <div class="video-banner__video">
        <iframe id="vimeo-banner" src="https://player.vimeo.com/video/217894047?color=02b4b6" width="640" height="360"
                allowfullscreen></iframe>
    </div>

Can someone help me please, I tried already to change the order of script files and it didn't work? Thanks.

Answer 1

The variable/class is being used before it is declared. This library needs to be completely loaded first. Using the class inside a function that waits for the page to finish loading and putting the reference to the library in the header should do the trick.