Vimeo API - Loading videos

Question

I Know my way around jQuery and JavaScript a little bit but as for optimising, i'm a bit weak but willing to learn new stuff.

i'm currently loading videos onto our site from Vimeo when a user clicks the appropriate image area. This is working fine, but I feel it's not an entirely performant way to go about doing it.

Does anyone see any issues with the code i've written below which could be done better?

JS

var videoData = [
{
    'player_id':'video1',
    'videoURL':'<?php the_field('two_vimeo_video_url'); ?>',
    'width':'1000',
},
{
    'player_id':'video2',
    'videoURL':'<?php the_field('six_vimeo_video_url'); ?>',
    'width':'1000',
}];

function loadVideo(target, videoid) {
    $.getJSON('http://www.vimeo.com/api/oembed.json?url=' + encodeURIComponent(videoData[videoid]['videoURL']) + '&api=1&player_id='+ videoData[videoid]['player_id'] +'&width='+videoData[videoid]['width']+'&byline=0&color=ffffff&title=0'+'&callback=?', function(data){

        $(target).find('.video-container').html(data.html); // puts an iframe embed from vimeo's json

        $(target).closest('iframe').load(function(){

            $f(player).addEvent('ready', function(id){
                var vimeoVideo = $f(videoid);
            });
        });
    });
}

$(function(){
    // Create array to store values
    var vimeoArray = [];
    var videoContainer = $('.video-container');

    // loop through st
    $(videoContainer).each(function(index, value) {

        // get the image with the data attr on each loop
        var dataAttr = $(this).attr('data-video');

        // if dataAttr is not false
        if ( dataAttr !== undefined) {

            // push data attribute value into array
            vimeoArray.push(dataAttr);

            // Store last element of array on iteration
            var videoid = vimeoArray[vimeoArray.length-1];

            // attach click handler to the parent of the scoped element
            $(this).parent().click(function(){

                // load the video
                loadVideo(this, videoid);
                $(this).unbind('click');
                $(this).find('.b-studio__image').hide();

            });
        }
    });
});

I've created a jsfiddle as well with all the code and some dummy data, any suggestions would be really helpful :)

Answer 1

I think you don't really need to store entries in the array in order to get incremental ids, just use the element index relative to the current selection. Also, I made a few cosmetic improvements and added a callback to your loadVideo function, so the image is hidden just after the video is loaded.

var videoData = [{
    'player_id':'video1',
    'url':'http://vimeo.com/87701971',
    'width':'1000'
},
{
    'player_id':'video2',
    'url':'http://vimeo.com/73893277',
    'width':'1000'
}];

function loadVideo($target, ix, next){
    return function() {
        var video = videoData[ix];
        var path = 'http://www.vimeo.com/api/oembed.json?'+
            Object.keys(video).map(function(key){
                return key + '=' + video[key];
            }).join('&')+
            'api=1&byline=0&color=ffffff&title=0&callback=?';
        $.getJSON(path, function(data){
            $target.find('.video-container').html(data.html);
            $target.closest('iframe').load(function(){
                $f(player).addEvent('ready', function(id){
                    var vimeoVideo = $f(videoid);
                    next();
                });
            });
        });
    };
}

$(function(){
    $('.video-container').each(function(ix){
        var $cont = $(this),
            $par = $cont.parent();
        var attr = $cont.attr('data-video');
        if (typeof attr !== typeof undefined && attr !== false) {
            $par.one('click', loadVideo($par, ix, function(){
                $container.find('.b-studio__image').hide();
            }));
        }
    });
});