Unable to call GIPHY API

I have a text box and a search button. Based on user input, I want to query Giphy api to fetch matching Gifs. but my ajax call always going to error. Can anybody help me,

 $('#button2').click(function() {
   var srchParam = $('#srcCriteria').val();

   $.ajax({
    url: "http://api.giphy.com/v1/gifs/search?q=dog&api_key=dc6zaTOxFJmzC",
    type: "GET",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(response) {
   alert("hello");
    //console.log(response.data[0].bitly_url);
   },
  error: function(xhr, status, error) {
     alert("bye");
   }
 }); 
});

Here is the jsfiddle link: https://jsfiddle.net/Appy169/faedybhf/12/

The problem lies in url on jsfiddle. If you check the console you will see this message:

Blocked loading mixed active content “http://api.giphy.com/v1/gifs/search?q=test&api_key=dc6zaTOxFJmzC”

What this means you ask? It means that you are calling http from https.

Just for testing you can change the url to //api.giphy.com/v1/gifs/search?q=" + $('#srcCriteria').val() + "&api_key=dc6zaTOxFJmzC

and you will see it works.

Updated working JSFIDDLE.