Load cover-image with javascript on https website

Question

Our app is delivered through https, we have a possibility of embedding vimeo videos in it.

Now, we're using JavaScript to load among other things a cover-image. A call could look something like this

$.ajax({
    type: 'GET',
    url: 'https://www.vimeo.com/api/v2/video/80973511.json',
    jsonp: 'callback',
    dataType: 'jsonp',
    success: function(data) {
        var thumbnail_src = data[0].thumbnail_large;
        console.log(thumbnail_src)
    }
});

Note that we're requesting over https here, and if you open the url above in a browser it'll load info about "The Work of Zina Nicole Lahr", over HTTPS.

Now, execute this on a site with jquery on https and you'll get the following message:

[blocked] The page at 'https:// ------------erased---------------' was loaded over HTTPS, but ran insecure content from 'http://vimeo.com/api/v2/video/80973511.json?callback=jQuery19106951870615594089_1386837009643&_=1386837009644': this content should also be loaded over HTTPS.

It's like the vimeo-api is redirecting the JSONP request to an insecure connection. The network-tab says the same.

Something tells me https is not supported in these cases?

Hints: https://vimeo.com/forums/topic:17127

Answer 1

Take out the www from your url. It looks like www.vimeo.com on either protocol redirects to http://vimeo.com.

https://www.vimeo.com/api/v2/video/80973511.json redirects https://vimeo.com/api/v2/video/80973511.json does not redirect