Olá, Jonathas. Tudo bem?

Eu usei a seguinte abordagem. Primeiro, eu adicionei em cada vídeo no json, uma chave data com os valores formatados no padrão ´ano-mês-dia`.

    {
      "id": 1,
      "titulo": "Conhecendo a linguagem Go | Hipsters.Talks",
      "descricao": "3 mil visualizações",
      "url": "https://www.youtube.com/embed/y8FeZMv37WU",
      "imagem": "https://github.com/MonicaHillman/aluraplay-requisicoes/blob/main/img/logo.png?raw=true",
      "categoria": "Programação",
      "data": "2025-07-15"  /* Nesse padrão */
    },

Depois, no HTML eu adicionei mais dois botões referentes a ordenação:

<a href="#" name="Mais recentes" id="ordenarMaisRecente" class="superior__item">Mais recentes</a>
<a href="#" name="Mais antigos" id="ordenarMaisAntigo" class="superior__item">Mais antigos</a>

Agora no javascript, usei o querySelector para referenciar os botões pelos ids:

const btnOrdenarMaisRecente = document.querySelector("#ordenarMaisRecente");
const btnOrdenarMaisAntigo = document.querySelector("#ordenarMaisAntigo");

É necessário também adicionar o atributo data na estrutura HTML com os valores de cada data dos vídeos:

containerVideos.innerHTML += `
    <li class="videos__item" data="${video.data}"> /* Nessa linha */
        <iframe src="${video.url}" title="${video.titulo}" frameborder="0" allowfullscreen></iframe>
        <div class="descricao-video">
            <img class="img-canal" src="${video.imagem} alt="Logo do Canal">
            <h3 class="titulo-video">${video.titulo}</h3>
            <p class="titulo-canal">${video.descricao}</p>
            <p class="categoria" hidden>${video.categoria}</p>
        </div>
    </li>
`;

E criei a seguinte função:

function ordenarPorData(ordemRecente) {
    const videos = Array.from(document.querySelectorAll(".videos__item"));
    console.log(videos)
    
    const videosOrdenados = videos.sort((a, b) => {
        const dataA = new Date(a.getAttribute('data'));
        const dataB = new Date(b.getAttribute('data'));
        
        if (ordemRecente) {
            return dataB - dataA; 
        } else {
            return dataA - dataB; 
        }
    });
    
  
    const container = document.querySelector(".videos__container");
    container.innerHTML = ''; 
    videosOrdenados.forEach((video) => {
        video.style.display = "block";
        container.appendChild(video);
    });
}

A função ordena os vídeos com base no atributo data de cada elemento. Ela recebe um parâmetro ordemRecente, que se for true, ordena do mais recente para o mais antigo e se for false, do mais antigo para o mais recente.

Primeiro, ela seleciona todos os vídeos com querySelectorAll e converte a NodeList em um array. Em seguida, usa o método sort para comparar as datas, convertidas com new Date(). Após a ordenação, o conteúdo do container é limpo (innerHTML = ''), e os vídeos são reinseridos, garantindo que estejam visíveis (display = "block").

E então, os botões "Mais recentes" e "Mais antigos" chamam a função ordenarPorData com true ou false, respectivamente, para aplicar a ordenação desejada.

btnOrdenarMaisRecente.addEventListener("click", () => ordenarPorData(true)); 
btnOrdenarMaisAntigo.addEventListener("click", () => ordenarPorData(false));

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar.

Abraços :)