Thumbnail of youtube does not take full size of div

Question

Thumbnail of youtube does not take full size of div

Asked 6 years, 1 month ago

Viewed 41 times

0

Good staff!

I’m having a problem, I’m using the youtube API to import thumbnails to my website, these thumbnails should take the size of the Divs, but no, they all have different sizes and titles misform the 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%");
                            });
                          }
                        });

                  //}
                }
              });

From now on, thank you very much!

Hi Nelson! Put an image showing how the current behavior is.

– Bruna Gomes da Silva

2018/05/14 at 21:22
I figured out what the problem was, it was even the youtube thumbnails that don’t come with good quality.

– Nelson Pacheco

2018/05/14 at 21:31

No answers

Browser other questions tagged javascript css api youtube

You are not signed in. Login or sign up in order to post.