Search code examples
jqueryvimeovimeo-api

Loading multiple Vimeo videos into SharePoint 2013 pages, causes issues in Safari browsers

I'm using the following code (in a .js file), to load multiple videos onto a publishing page in SharePoint 2013...

function vimeo() {

var mtarget = $('.vimeo.training');
if (mtarget.length) {

$.getJSON('//www.vimeo.com/api/oembed.json?url=' + encodeURIComponent('//vimeo.com/mvideo01?color=ffcd00&title=0&byline=0&portrait=0') + '&width=640&callback=?', function(data){
        mtarget.prepend(data.html);
});

$.getJSON('//www.vimeo.com/api/oembed.json?url=' + encodeURIComponent('//vimeo.com/mvideo02?color=ffcd00&title=0&byline=0&portrait=0') + '&width=640&callback=?', function(data){
        mtarget.prepend(data.html);
});

$.getJSON('//www.vimeo.com/api/oembed.json?url=' + encodeURIComponent('//vimeo.com/mvideo03?color=ffcd00&title=0&byline=0&portrait=0') + '&width=640&callback=?', function(data){
        mtarget.prepend(data.html);
});



}
//*/
}


$(window).load(function() {
vimeo();
});

In IE, Chrome, and FireFox, all the videos load/stack fine...but on an ipad - Safari browser, the iframes break and you can only see the first video. Is this a Vimeo issue for Safari browsers?

Thanks for any advice!

UPDATE

Thank you Ryan for helping me realize that SharePoint 2013 site pages handle rendering multiple Vimeo videos a lot better than SharePoint publishing pages do, especially if you care about Safari.

So the issue is not Vimeo, it's what type of pages you make in SharePoint 2013.

Solution

  • I just made a quick test page, used your code, and everything seems to be working fine for me.

    http://labs.ryanhefner.com/tests/ipad-oembed/

    I'm not sure if you are just using these as an example, but all I did was change the 'mvideo01', 'mvideo02', and 'mvideo03' to a valid clip_id (ex. 2) and everything seems to render fine for me, on an iPad 2.

    Let me know if you continue to run into issues after change the mvideo0X.