News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

appending code from two function jquery

Started by glennmckenna, February 22, 2016, 07:52:19 AM

Previous topic - Next topic

glennmckenna

hi
to start here is a copy of my code

var userid ='UCLdin3PebPaIVQdIC7Lp-kg';
var devkey ='*****************';



$(document).ready(function(){
    $.get(
        "https://www.googleapis.com/youtube/v3/channels",{
            part: 'contentDetails',
            id: userid,
            key: devkey},
            function(data){
                $.each(data.items, function(i, item){
                    pid = item.contentDetails.relatedPlaylists.uploads;
                    getVids(pid);
                 })
            }
    );

    function getVids(pid){
        $.get(
            "https://www.googleapis.com/youtube/v3/playlistItems",{
                part: 'snippet',
                playlistId: pid,
                key: devkey},
            function(data){
                $.each(data.items, function(i, item){
                    videoTitle = item.snippet.title;
                    videoid = item.snippet.resourceId.videoId;
                    getdur(videoid);
                    videoimg = item.snippet.thumbnails.maxres.url;
                    videodesc = item.snippet.description;

                    var name ='<h4 class="modal-title">'+videoTitle+'</h4>';
                    var thumb ='<div class="ctr col-md-3 col-xs-12 ythumb"><a data-toggle="modal" href="#'+videoid+'"><img class="img-responsive" src="'+videoimg+'"></a></div>';
                    var desc ='<div>'+videodesc+'</div>';
                    var video ='<iframe src\"//www.youtube.com/embed/'+videoid+'\"></>';



                })
            }
        );
    }
    function getdur(videoid){
        $.get(
            "https://www.googleapis.com/youtube/v3/videos", {
                part:'contentDetails',
                id: videoid,
                key: devkey},
            function(data){
                $.each(data.items, function(i, item){
                    videodur = item.contentDetails.duration;
                    videolength = videodur.replace("PT","").replace("H",":").replace("M",":").replace("S","");

                    var Duration ='<div id="length" class="ytime header cat_bar"><h3 class="catbg">'+videolength+'</h3></div>';


                     thumblen ='<div class="col-md-3 col-xs-12 pad-5"><div class="ctr col-md-3 col-md-12 ythumb"><a data-toggle="modal" href="#'+videoid+'"><img class="img-responsive" src="'+videoimg+'"></a></div><div id="length" class="ytime header cat_bar"><h3 class="catbg">'+videolength+'</h3></div></div>'
                    $('#thumb-len').append(thumblen);
                })
            }
        );
    }
});


and what I'm trying to do is get the image from var thumb and var duration and output them both in the same div (link in the image attached)

here is how i was planning it to work:
https://jsfiddle.net/wpqfm891/3/

here is what i'm currently getting
http://beta.mdl-palissy.fr/youtube.php

may i also add the this will be done using bootstrap (I'll modify the codes to get the correct classes from he css)
for info (as written in the code) the image will be in a link (the duration also would be a bonus), this link will be linked to a modal that will show when the link is clicked like this
http://jsfiddle.net/xK24S/61/

is there a way i could possibly do that ?
cause at the moment it isn't really working

any help would be much appreciated
surely this can't be that hard to do ...

nend

I know the pain, the documents ready so the JavaScript in the iframe insert isn't going to work. This is why your left with blank boxes.

I could never figure out how to do this client side, server side would work but your putting a higher load on your machine when you could just have the clients browser do the processing.

glennmckenna

Quote from: nend on February 29, 2016, 09:16:06 PM
I know the pain, the documents ready so the JavaScript in the iframe insert isn't going to work. This is why your left with blank boxes.

I could never figure out how to do this client side, server side would work but your putting a higher load on your machine when you could just have the clients browser do the processing.
i don't mind either it's done server side or client side
i just followed a tuto on youtube and adapted it
here is the tuto:
https://www.youtube.com/watch?v=jdqsiFw74Jk

i haven't tried the iframes yet cause not even the thumbnails works correctly
here is a like to the web page:
http://beta.mdl-palissy.fr/youtube.php

as you can see i'm only getting one thumbnail instead of three but every thing looks fine in the console logs

Advertisement: