Fos
Mitglied
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.
Ich hoffe, dass irgendjemand sich mit CSS besser auskennt um mir weiter zuhelfen...
Danke schon einmal im Vorraus,
Jens W.
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.
HTML:
<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.
