0

Boas pessoal!

Estou com um problema, estou a utilizar a API do youtube para importar as thumbnails para o meu website, essas thumbnails deveriam ocupar o tamanho das divs, mas não, todas elas têm tamanhos diferentes e os titulos desformatam o css...

HTML:

<div class="div-pesquisa">

                     <div class="row">
                         <h3>You searched for...</h3>
                         </div>


                     <ul class="pesquisa Clearfix">

                                <li><button class="go-back-btn" type="button" name="button" id="back-form"><i class="ion-ios-arrow-back"></i>GO BACK</button></li>

                          <li id="topmusic1">
                                <figure class="music-img">
                                    <img src="img/300.png" alt="Music-1">
                                    <div class="info-music">
                                    <h6>Rap God</h6>
                                    </div>
                                </figure>
                            </li>

                          <li id="topmusic2">
                                <figure class="music-img">
                                    <img src="img/300.png" alt="Music-2">
                                    <div class="info-music">
                                    <h6>Rap God</h6>
                                    </div>
                                </figure>
                            </li>

                          <li id="topmusic3">
                                <figure class="music-img">
                                    <div><img src="img/300.png" alt="Music-3"></div>
                                    <div class="info-music">
                                    <h6>Rap God</h6>
                                    </div>
                                </figure>
                            </li>


                            <li><button class="see-more-btn" href="#more-music" type="button" name="button" id="your-playlist"><i class="ion-ios-add"></i>SEE MORE</button></li>

                        </ul>




                <ul class="result-info">
                        <li><button type="button" name="button" id="your-playlist"><i class="ion-ios-musical-notes"></i>PLAYLISTS</button></li>

                        <li><button type="button" name="button" id="top-albums"><i class="ion-ios-albums"></i>TOP ALBUMS</button></li>

                        <li><button type="button" name="button" id="biography"><i class="ion-ios-person"></i>BIOGRAPHY</button></li>
                      </ul>

                       </div>

CSS:

/* ---------------------------------------------- */
/* RESULTADO PESQUISA ARTISTA */
/* ---------------------------------------------- */


/*container da pesquisa*/
.div-pesquisa {
    position: absolute;
    z-index: 50000;
    top: 120.8%;
}


/*estilização do titulo "you searched for...*/
.div-pesquisa h3 {
    text-align: center;
    text-transform: uppercase;
    font-size: 100%;
    font-weight: 300;
    letter-spacing: 1px;
}



/*container da pesquisa*/
.pesquisa {
    list-style: none;
    display: inline-block;
    width: 100%;
    height: 100%;
    margin-top: 1%;
    top: -80%;
}


.pesquisa li {
    display: block;
    float: left;
    width: 20%;
    height: 270px;
}


/*Botao para voltar ao form de pesquisa*/
.go-back-btn {
    display: block;
    float: left;
    width: 100%;
    height: 100%;
    border: 0;
    color: #74C8D2;
    background-color: #fff;
    transition: all 0.5s ease-in-out;
}


.go-back-btn:hover {
    background-color: #74C8D2;
    color: #fff;
}

.go-back-btn i {
    display: block;
    font-size: 250%;
}








/*Botao para ver mais resultados*/
.see-more-btn {
    display: block;
    float: left;
    width: 100%;
    height: 100%;
    border: 0;
    color: #74C8D2;
    background-color: #fff;
    transition: all 0.5s ease-in-out;
}


.see-more-btn:hover {
    background-color: #74C8D2;
    color: #fff;
}

.see-more-btn i {
    display: block;
    font-size: 250%;
}



/*imagem da musica do artista */
.music-img {
    width: 100%;
    height: 300px;
    margin:0;
    overflow: hidden;
    background-color: #000;
}

 /* ===== */
.pesquisa li img {
    opacity: 0.7;
    transform: scale(1.18);
    width: 100%;
    height: auto;
    transition: all 0.5s ease-in-out;
}


.pesquisa li img:hover {
    opacity: 1;
    transform: scale(1.03);
    width: 100%;
    height: auto;
}


/* ----------------------------- IMPORTANTE ---------------------*/
/*info da musica (ANIMAR E FAZER COM QUE AO FAZER HOVER NA MUSICA APAREÇA*/
.info-music {
    margin: 0 auto;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.46));
    width: 100%;
    height: 100px;
    padding: 0;
    top: -35%;
    position: relative;
    z-index: 1000;
}

.info-music h6 {
    color: #fff;
    text-align: center;
    font-size: 100%;
    position: relative;
    top: 40%;
    z-index: 1000;
}




/*Container dos botoes*/
.result-info {
    position: relative;
    list-style: none;
    display: inline-block;
    width: 100%;
    z-index: 1;
}


.result-info li {
    display: block;
    float: left;
    width: 33.33%;
    z-index: 1;
}

.result-info button {
            width: 100%;
            height: 200px;
            margin-top: -1%;
            color: #fff;
            border: 0;
            background-color: #74C8D2;
            text-decoration: none;
            transition: all 0.5s ease-in-out;
            z-index: 1;
        }




.result-info button:hover {
            background-color: #fff;
            color: #74C8D2;
            text-decoration: none;
            transition: all 0.5s ease-in-out;
            z-index: 1;
        }



.result-info li button i {
            display: block;
            font-size: 250%;
}

JS:

$("#submeter").click(function(){
    if ($("#artist").val()!="") {

      let query = $("#artist").val()

      let url ="http://musicbrainz.org/ws/2/artist/?query=artist:"+ query +"&fmt=json";
      url=encodeURI(url);

      $.get(url,function(response,status){
        if (status=='success') {
          //alert(response.works)
          //alert(query);
          $(".form").hide();
          $(".div-pesquisa").show();
          $(".div-pesquisa h3").html("You searched for \" " + $("#artist").val() +  " \" ");

          url="http://musicbrainz.org/ws/2/artist/"+ response.artists[0].id +"?inc=releases&fmt=json";
          url=encodeURI(url);
          //alert(url);
          $.get(url,function(response,status){
            if (status=='success') {
              url="http://musicbrainz.org/ws/2/release/"+ response.releases[0].id +"?inc=recordings&fmt=json";
              url=encodeURI(url);
              $.get(url,function(response,status){
                if (status=='success') {
                  //for (var i = -1; i < 3 ; i++){


                  url ="https://www.googleapis.com/youtube/v3/search?q="+ query + " " +response.media[0].tracks[0].title+"&maxResults=1&part=snippet&key="+youtubeAPIKey;
                  url=encodeURI(url);
                  //alert(url);
                  //alert(i);
                    $.get(url,function(response,status){
                      if (status=='success') {
                        $("#topmusic1 figure img").attr("src", response.items[0].snippet.thumbnails.high.url).css("height", "100%").css("width", "100%");
                        $("#topmusic1 figure div h6").html(response.items[0].snippet.title);
                        $("#topmusic1 figure img").click(function(){
                          $(".div-pesquisa").hide();
                          $(".player").show();
                          $(".player iframe").attr('src', "https://www.youtube.com/embed/"+response.items[0].id.videoId).css("border", "0").css("width", "100%").css("height", "100%");
                        });
                      }
                    });


                    url ="https://www.googleapis.com/youtube/v3/search?q="+ query + " " +response.media[0].tracks[1].title+"&maxResults=1&part=snippet&key="+youtubeAPIKey;
                    url=encodeURI(url);
                    //alert(url);
                    //alert(i);
                      $.get(url,function(response,status){
                        if (status=='success') {
                          $("#topmusic2 figure img").attr("src", response.items[0].snippet.thumbnails.high.url).css("height", "100%").css("width", "100%");
                          $("#topmusic2 figure div h6").html(response.items[0].snippet.title);
                          $("#topmusic2 figure img").click(function(){
                            $(".div-pesquisa").hide();
                            $(".player").show();
                            $(".player iframe").attr('src', "https://www.youtube.com/embed/"+response.items[0].id.videoId).css("border", "0").css("width", "100%").css("height", "100%");
                          });
                        }
                      });


                      url ="https://www.googleapis.com/youtube/v3/search?q="+ query + " " +response.media[0].tracks[2].title+"&maxResults=1&part=snippet&key="+youtubeAPIKey;
                      url=encodeURI(url);
                      //alert(url);
                      //alert(i);
                        $.get(url,function(response,status){
                          if (status=='success') {
                            $("#topmusic3 figure img").attr("src", response.items[0].snippet.thumbnails.high.url).css("height", "100%").css("width", "100%");
                            $("#topmusic3 figure div h6").html(response.items[0].snippet.title);
                            $("#topmusic3 figure img").click(function(){
                              $(".div-pesquisa").hide();
                              $(".player").show();
                              $(".player iframe").attr('src', "https://www.youtube.com/embed/"+response.items[0].id.videoId).css("border", "0").css("width", "100%").css("height", "100%");
                            });
                          }
                        });

                  //}
                }
              });

Desde já, muito obrigado!

2
  • Oi Nelson! Coloca uma imagem mostrando como é o comportamento atual. 14/05/2018 às 21:22
  • Ja descobri qual era o problema, era mesmo das thumbnails do youtube que não vêm com boa qualidade. 14/05/2018 às 21:31

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .