Erro durante a requisição let dado = await fetch(url);

Oi, Eu estou com um problema com um projeto para o meu portifólio, eu faço a requisição e renderizo na tela a resposta da API normalmente quando faço pelo meu servidor local via live server, mas o projeto salvo no github da o seguinte erro:

Pelo firefox
Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.
renderizar https://marcos-rez.github.io/PrevisaoTempo-Cambio-ConsultaFilmes/js/SoFilmes.js:20

Pelo Chome
Filmes.js:20 Mixed Content: The page at 'https://marcos-rez.github.io/PrevisaoTempo-Cambio-ConsultaFilmes/html/filmes.html#container-lista-filme'  was loaded over HTTPS, but requested an insecure resource 'http://www.omdbapi.com/?s=batman&apikey=5e3c24a9'. This request has been blocked; the content must be served over HTTPS.
Filmes.js:20     Uncaught (in promise) TypeError: Failed to fetch
at renderizar (SoFilmes.js:20:22)

repositório: https://github.com/Marcos-Rez/PrevisaoTempo-Cambio-ConsultaFilmes
pages: https://marcos-rez.github.io/PrevisaoTempo-Cambio-ConsultaFilmes/html/filmes.html

let count = 0;

let li_erro = document.createElement('li'); async function input(){ let input = document.querySelector('.input-filme'); let nome = input.value; input.value = ''; return nome; }

async function renderizar(){ let titulo = document.querySelector('.h2-filme'); let imgagen = document.querySelector('.img-filme'); let tipo = document.querySelector('.tipo'); let ano = document.querySelector('.ano');

let nome = await input();

let url = `http://www.omdbapi.com/?s=${nome}&apikey=5e3c24a9`;
console.log(url)
let dado = await fetch(url);
let informacao = await dado.json();

let ul = document.querySelector('.container-lista-filme');

if(nome == "" && count == 0){ count++;

    li_erro.innerHTML =  `<li class="lista-filme">
                        <h2 class="h2-filme">Titulo não encontrado. Tente novamente</h2>
                        <div class="container-detalhe-filme">
                            <img class="img-filme" src="../img/filmes.jpg" alt="">
                            <div>
                                <p class="tipo">Filmes e Séries</p>
                                <p class="ano">Classicos e Lançamentos</p>
                            </div>
                        </div>
                    </li>`;
    ul.appendChild( li_erro);
}
    li_erro.style.color = 'red';


for(let i = 0; i < informacao.Search.length; i++){
    if(informacao.Search.length > 0){
        li_erro.style.display = 'none';
        let li = document.createElement('li');
        li.innerHTML = "";
        let dado = "";
                dado =  `<li class="lista-filme">
                                        <h2 class="h2-filme">${informacao.Search[i].Title}</h2>
                                        <img class="img-filme" src="${informacao.Search[i].Poster}" alt="">
                                        <div>
                                            <p class="tipo">${informacao.Search[i].Type}</p>
                                            <p class="ano">${informacao.Search[i].Year}</p>
                                        </div>
                                </li>`;
                //li.replaceWith( dado, dado)
                li.innerHTML = dado;
                dado = "";
                ul.appendChild(li); 
    }
}

}

Obrigado.