Good people!
I have a problem, I am using the youtube API to import the thumbnails to my website, these thumbnails should occupy the size of the divs, but no, they all have different sizes and the titles deform 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%");
});
}
});
//}
}
});
Thanks in advance!