вывести описание видео под видеоплеером

@kgsosisok · Регистрация: 20.02.2013

Author24 — интернет-сервис помощи студентам

Запуталась в конец со скриптом, изучаю только третий день, есть скрипт, который берет информацию из канала ютуб. Вопрос - как мне вывести описание (то, что щас справа) вниз под видео и только в единственном числе (т.е. одно описание текущего видео) ?
буду очень благодарна за помощь.
Ссылка на песочницу http://jsfiddle.net/fuzMn/91/

HTML5

<html>
    <body>
        <div id="player">
        </div>
</body>
</html>

Javascript

(function() {
    function createPlayer(jqe, video, options) {
        var ifr = $('iframe', jqe);
        if (ifr.length === 0) {
            ifr = $('<iframe scrolling="no">');
            ifr.addClass('player');
        }
        var src = 'http://www.youtube.com/embed/' + video.id;
        if (options.playopts) {
            src += '?';
            for (var k in options.playopts) {
                src += k + '=' + options.playopts[k] + '&';
            }
            src += '_a=b';
        }
        ifr.attr('src', src);
        jqe.append(ifr);
    }
 
    function createCarousel(jqe, videos, options) {
        var car = $('div.carousel', jqe);
        if (car.length === 0) {
            car = $('<div>');
            car.addClass('carousel');
            jqe.append(car);
 
        }
        $.each(videos, function(i, video) {
 
            options.thumbnail(car, video, options);
        });
    }
 
    function createThumbnail(jqe, video, options) {
 
        var imgurl = video.thumbnails[0].url;
     
        desk = $('<p class="yt-descript">' + video.title + '</p>');
        jqe.append(desk);
        desk.click(function() {
            options.player(options.maindiv, video, $.extend(true, {}, options, {
                playopts: {
                    autoplay: 1
                }
            }));
        });
    }
 
    var defoptions = {
        autoplay: false,
        user: null,
        carousel: createCarousel,
        player: createPlayer,
        thumbnail: createThumbnail,
        loaded: function() {},
        playopts: {
            autoplay: 0,
            egm: 1,
            autohide: 1,
            fs: 1,
            showinfo: 1
        }
    };
 
 
    $.fn.extend({
        youTubeChannel: function(options) {
            var md = $(this);
            md.addClass('youtube');
            md.addClass('youtube-channel');
            var allopts = $.extend(true, {}, defoptions, options);
            allopts.maindiv = md;
            $.getJSON('http://gdata.youtube.com/feeds/users/' + allopts.user + '/uploads?alt=json-in-script&format=5&callback=?', null, function(data) {
                var feed = data.feed;
                var videos = [];
                $.each(feed.entry, function(i, entry) {
 
                    var video = {
                        title: entry.title.$t,
                        id: entry.id.$t.match('[^/]*$'),
                        thumbnails: entry.media$group.media$thumbnail
                    };
                    videos.push(video);
                });
                allopts.allvideos = videos;
                allopts.carousel(md, videos, allopts);
                allopts.player(md, videos[0], allopts);
                allopts.loaded(videos, allopts);
            });
        }
    });
 
})();
 
$(function() {
    $('#player').youTubeChannel({
        user: 'GakoGcaO9A4XhL53b7EOOg'
    });
});
//]]>

CSS

    #player {
    width: 580px;
    height: 280px;
    overflow: hidden;
    background: white;
    position: relative;
    border: solid 2px gray;
    padding: 5px;
}
 
.youtube .carousel {
    width: 230px;
    height: 100%;
    overflow: auto;
    position: absolute;
    right: 0px;
    z-index: 3;
}
 
.youtube .thumbnail {
    margin: 2px;
    width: 100px;
    border: 1px solid black;
}
 
.youtube iframe.player {
    width: 338px;
    height: 278px;  
    overflow: auto;
    border: 0;
}
.yt-descript {
    color: #000;   
    display:block;
    height:100px;
}
.carItemContain{
    width:;
    height:100px;
}

@~~only_#~~ · 06.08.2013, 14:48

Так:

http://jsfiddle.net/fuzMn/141/

?

Javascript

(function() {
    function createPlayer(jqe, video, options) {
        var ifr = $('iframe', jqe);
        if (ifr.length === 0) {
            ifr = $('<iframe scrolling="no">');
            ifr.addClass('player');
        }
        var src = 'http://www.youtube.com/embed/' + video.id;
        if (options.playopts) {
            src += '?';
            for (var k in options.playopts) {
                src += k + '=' + options.playopts[k] + '&';
            }
            src += '_a=b';
        }
        ifr.attr('src', src);
        jqe.append(ifr);
    }
 
    function createCarousel(jqe, videos, options) {
        var car = $('div.carousel', jqe);
        if (car.length === 0) {
            car = $('<div>');
            car.addClass('carousel');
            jqe.append(car);
 
        }
        $.each(videos, function(i, video) {
            options.thumbnail(car, video, options);
        });
    }
 
    function createThumbnail(jqe, video, options) {
 
        var imgurl = video.thumbnails[0].url;
     
        desk = $('<p class="yt-descript">' + video.title + '</p>');
        jqe.append(desk);
        desk.click(function() {
            options.player(options.maindiv, video, $.extend(true, {}, options, {
                playopts: {
                    autoplay: 1
                }
            }));
        });
    }
 
    var defoptions = {
        autoplay: false,
        user: null,
        player : createPlayer,
        carousel: createCarousel,
        thumbnail: createThumbnail,
        loaded: function() {},
        playopts: {
            autoplay: 0,
            egm: 1,
            autohide: 1,
            fs: 1,
            showinfo: 1
        }
    };
 
 
    $.fn.extend({
        youTubeChannel: function(options) {
            var md = $(this);
            md.addClass('youtube');
            md.addClass('youtube-channel');
            var allopts = $.extend(true, {}, defoptions, options);
            allopts.maindiv = md;
            $.getJSON('http://gdata.youtube.com/feeds/users/' + allopts.user + '/uploads?alt=json-in-script&format=5&callback=?', null, function(data) {
                var feed = data.feed;
                var videos = [];
                $.each(feed.entry, function(i, entry) {
 
                    var video = {
                        title: entry.title.$t,
                        id: entry.id.$t.match('[^/]*$'),
                        thumbnails: entry.media$group.media$thumbnail
                    };
                    videos.push(video);
                });
                allopts.allvideos = videos;
                allopts.carousel(md, videos, allopts);
                allopts.player(md, videos[0], allopts);
                allopts.loaded(videos, allopts);
            });
        }
    });
 
})();
 
$(function() {
    $('#player').youTubeChannel({
        user: 'GakoGcaO9A4XhL53b7EOOg'
    });
});
//]]>

@kgsosisok · 06.08.2013, 15:00 **[ТС]**

0xAX, спасибо большое, а как бы еще убрать, чтоб не подгружались остальные тайтлы видео внизу?

@~~only_#~~ · 06.08.2013, 15:06

Сообщение от kgsosisok

а как бы еще убрать, чтоб не подгружались остальные тайтлы видео внизу?

Если я правильно понял что вы имели ввиду, то:

http://jsfiddle.net/fuzMn/148/

Javascript

function createCarousel(jqe, videos, options) {
   ....
   $.each(videos, function(i, video){
       if (i == 0)
           options.thumbnail(car, video, options)
   });
}

@kgsosisok · 06.08.2013, 15:16 **[ТС]**

Да! огромное спасибо, что помогли решить задачу.

@kgsosisok 17 / 17 / 1 Регистрация: 20.02.2013 Сообщений: 154
	06.08.2013, 15:00 [ТС]	3
	0xAX, спасибо большое, а как бы еще убрать, чтоб не подгружались остальные тайтлы видео внизу? 0

@kgsosisok 17 / 17 / 1 Регистрация: 20.02.2013 Сообщений: 154
	06.08.2013, 15:16 [ТС]	5
	Да! огромное спасибо, что помогли решить задачу. 0