Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Conteúdo some da página

por Mariana Ribeiro
| 117k xp | 48 posts
Web Designer

Bom dia gente, Gostaria de um auxílio, preciso exibir últimos vídeos do canal do youtube no site.

Este código que utilizei funcionou, após o carregamento da página, ele exibe os últimos cinco vídeos: 

<div class="video">
                <script>
                    var htmlString = "";
                    var apiKey = 'minhaAPI'; //https://console.developers.google.com
                    var channelID = 'MeuCanal';
                    var maxResults = 999;

                    $.getJSON('https://www.googleapis.com/youtube/v3/search?key=' + apiKey + '&channelId=' + channelID + '&part=snippet,id&order=date&maxResults=' + (maxResults > 1 ? 5: maxResults), function(data) {
                        $.each(data.items, function(i, item) {
                            var videoID = item['id']['videoId'];
                            var title = item['snippet']['title'];
                            var videoEmbed = "https://www.youtube.com/embed/" + videoID;
                            htmlString += '<iframe width="100%" height="400" src="' + videoEmbed + '" frameborder="0" allowfullscreen></iframe>';
                        });
                        $('.video').html(htmlString);
                    });
                </script>
            </div>

Porém, acontece o seguinte:

A página carrega inteira, depois some todo o conteúdo e somente aparece os iframes dos cinco vídeos que solicitei.

Alguém poderia me auxiliar sobre como posso fazer, estes vídeos aparecerem somente numa section ou div específica, sem tomar conta do site todo, e sumir com todo o conteúdo original da página?

Agradeço muito pela ajuda, desde já!

5 respostas
por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Fala Mariana, tudo bom?

Eu fiz alguns testes com o seu código e notei que o código da tag script está dentro da tag video, deixe a tag script antes do fechamento do body.

O código que eu fiz como teste, manteve o resto do conteudo do site, e só alterou o conteudo da tag video:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>Código antes da tag que recebe os vídeos</h1>
    <div class="video"></div>
    <h2>Código depois da tag que recebe os vídeos</h2>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
        var htmlString = "";
        var apiKey = 'minhaAPI'; //https://console.developers.google.com
        var channelID = 'UCo7EHzKF2zDFWszw7Dg4mPw'; // Canal da alura :)
        var maxResults = 999;

        $.getJSON('https://www.googleapis.com/youtube/v3/search?key=' + apiKey + '&channelId=' + channelID + '&part=snippet,id&order=date&maxResults=' + (maxResults > 1 ? 5: maxResults), function(data) {
            $.each(data.items, function(i, item) {
                var videoID = item['id']['videoId'];
                var title = item['snippet']['title'];
                var videoEmbed = "https://www.youtube.com/embed/" + videoID;
                htmlString += '<iframe width="100%" height="400" src="' + videoEmbed + '" frameborder="0" allowfullscreen></iframe>';
            });
            $('.video').html(htmlString);
        });
    </script>
</body>
</html>

Espero ter ti ajudado :)

por Mariana Ribeiro
| 117k xp | 48 posts
Web Designer

Olá Mario,

Então, criei outra página do site em HTML funcionou, mas na página que eu preciso colocar isso não funcionou.

A pessoa que desenvolveu esse site anteriormente, fez uma página sem body, somente com includes no topo, um section id="content-home" que deveria ser o body e um include para o footer. E o index também está em PHP.

Estou bastante na dúvida do que pode estar influenciando.

por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Então, no geral, tenta separar essa tag script de dentro da tag que tem o seletor do video.

Se for o caso ao invés de usar .video como seletor coloca um id ou um seletor novo somente para o lugar onde vai aparecer os videos.

por Mariana Ribeiro
| 117k xp | 48 posts
Web Designer

Mario,

Como que você me sugere uma adaptação deste código para exibir somente uma playlist?

solução!
por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Mariana, eu sugiro você criar uma lista dinâmica com as URLs dos vídeos, e ao clicar nessa lista você pega um atributo da tag como um data-href e faz o mesmo carregar em uma Tag Iframe.

Espero ter ajudado :)