YouTube Kanal in Webseite einbinden: Horizontal statt vertikal

[Fos]

Hallo,

Ich habe ein kleines Problem mit einem Script zum Einbinden eines YouTube Kanals in eine Webseite. Und zwar möcht ich die Video-Thumbnails auf der rechten Seite unter den Player verschieben. Die Leiste und die Scrollbar sollen sich vertikal unter dem Video befinden. Alles was ich bisher mit position:absolute, position:relative, margin:..., etc probiert habe sieht nicht gerade hübsch aus.

<div id="scrolly" style="width: 665px; height: 310px;">
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
   
<style>
#player {
    width: 660px;
    height: 300px;
    overflow: hidden;
    background: none;
    position: absolute;
    border: none;
}
.youtube .carousel {
    width: 20%;
    height: 100%;
    overflow: auto;
    position: absolute;
    right: 0px;
    z-index: 3;
}
.youtube .thumbnail {
    margin: 2px 0 0 10px;
    width: 80%;
    border: 1px solid black;
    cursor: pointer;
}
.youtube iframe.player {
    width: 80%;
    height: 300px; 
    overflow: auto;
    border: 0;
}
</style>
       <div id="player">
        </div>
        <script>
            (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;
        var img = $('img[src="' + imgurl + '"]');
        if (img.length !== 0) return;
        img = $('<img>');   
        img.addClass('thumbnail');
        jqe.append(img);
        img.attr('src', imgurl);
        img.attr('title', video.title);
        img.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: 0
        }
    };
   
   
    $.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:'supersanoj'});
});
        </script>
</div>

Ich hoffe, dass irgendjemand sich mit CSS besser auskennt um mir weiter zuhelfen...

Danke schon einmal im Vorraus,

Jens W.

 

[Fos]

Hier scheint ja alles gestorben zu sein...

 

[threadi]

Gestern war schönes Wetter ;) Und Du postest eine Gestaltungsfrage im HTML-Bereich - auch nicht hilfreich, wenn Du Antworten willst. Habs mal entsprechend verschoben.

Um dir helfen zu können wäre es besser, wenn Du auch einen Link zu betreffenden Seite postest.

 

[Fos]

Ok. Schönes Wetter ist tödlich... Eigentlich muss dieser Code einfach nur kopiert und in ein HTML-Dokument gespeichert werden. Momentan teste ich den Script nur lokal. Da ich aber niemanden an meinen PC lasse, hier geht's zum Spielplatz: https://fosforitomedia.com/yt.php

 

[Tronjer]

Rein per CSS lässt sich das nicht sauber lösen. Das Script erzeugt die HTML-Struktur mit Carousel und Thumbnails und fügt diese ins DOM ein. Entweder das Script anpassen oder darauf verzichten und etwas eigenes schreiben.

 

[djheke]

So funktioniert es.

#player {
  width: auto;
  height: auto;
  float:left;
  margin:20px;
  position: relative;
}
.youtube .carousel {
  margin-top:321px;
  overflow:auto;
  float:left;
  white-space:nowrap;
  overflow-y:hidden;
}
.youtube .thumbnail {
  position:relative;
  top:0px;
  width: 20%;
  margin-right:1px;
  cursor: pointer;
}
.youtube iframe.player {
  position:absolute;
  top:0px;
  left:0px;
  right:0px;
  width: 100%;
  height: 320px;
  overflow: auto;
 border:none;
}

http://www.gipspferd.de/forumhilfe/youtube.htm

 

[Fos]

Jupii :) Dankeschön!