Here is my code example below, there I used for loop to get the data from ghost API and its working fine. I want to append the data with dyanamic youtube image based on the post iframe's video code.
single_carousel: function(){
var post_type_two = "carousel";
var section_heading_one = "Trending Videos";
var single_carousel_container = $(".video-carousel");
var single_carousel_items = "all";
$(".section-heading-one h3").append(section_heading_one);
$.get(ghost.url.api("posts",{
filter: "tag:"+post_type_two+"",
limit : single_carousel_items
})).done(function(data){
var postsInfo = data.posts;
if(postsInfo.length >0){
for(var i=0;i < postsInfo.length; i++){
post_title = postsInfo[i].title;
post_url = postsInfo[i].url;
post_image = postsInfo[i].image;
post_content = postsInfo[i].html;
$(".other").append("<div class='hidden'>"+post_content+"</div>");
if(post_image.length >0) {
single_carousel_container.append('<div class="single-video"><div class="video-img"><a href="'+post_url+'"><img src="'+post_image+'" alt="'+post_url+'" /></a><span class="video-duration">5.28</span></div><div class="video-content"><h4><a href="'+post_url+'" class="video-title">'+post_title+'</a></h4><div class="video-counter"><div class="video-viewers"> <span class="fa fa-eye view-icon"></span> <span>241,021</span></div><div class="video-feedback"><div class="video-like-counter"> <span class="fa fa-thumbs-o-up like-icon"></span> <span>2140</span></div><div class="video-like-counter"> <span class="fa fa-thumbs-o-down dislike-icon"></span> <span>2140</span></div></div></div></div></div>');
}
$(".other .hidden").each(function(){
var iframe_src = $(this).find("iframe").attr("src");
if(typeof iframe_src !== "undefined"){
var video_id = iframe_src.slice(-11);
var another_image = 'http://i3.ytimg.com/vi/'+video_id+'/maxresdefault.jpg';
if(another_image !== null && another_image !== "undefined" && another_image !== "" ) {
console.log(another_image);
}
}
});
}
}
});
},
But I want to find the iframe by using .other .hidden class and successfully got the YouTube video ID there.
As example i used the following function for that,
$(".other .hidden").each(function(){
var iframe_src = $(this).find("iframe").attr("src");
if(typeof iframe_src !== "undefined"){
var video_id = iframe_src.slice(-11);
var another_image = 'http://i3.ytimg.com/vi/'+video_id+'/maxresdefault.jpg';
if(another_image !== null && another_image !== "undefined" && another_image !== "" ) {
console.log(another_image);
}
}
});
That is working fine also, Now i want to show specific image for each post items. Where actually showing multiple images right now.
