Для начала я бы определил границы применяемости: что, например, будет, если видео будет 1000. Значит сразу показываем только несколько, остальные доступны по ссылке. В таком случае можно вообще расположить 10 картинок, обозначающие видео, по кругу через position: absolute. Но, очевидно, для универа такое не подойдет.
Пусть тогда нам надо расположить от 6 до 20 картинок по кругу (меньше 6 - круг будет не очень-то круглый, больше 20 - картинки слишком мелкие). В таком случае просто рассчитываем через JS местоположение и указываем его через position:absolute.
Структура HTML:
<div id="wrap">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
<img src="/">
</div>
CSS просто чтобы было наглядно сразу посмотреть:
#wrap {position: absolute; }
#wrap img {width: 30px; height: 30px; background:#333; position: absolute; }
и, собственно, сам скрипт на JS и jQuery:
var num = 20; // Число картинок
var wrap = 400; // Размер "холста" для расположения картинок
var radius = 200; // Радиус нашего круга
$(document).ready(function() {
for (i=0;i<num; i++){
var f = 2 / num * i * Math.PI; // Рассчитываем угол каждой картинки в радианах
var left = wrap + radius * Math.sin(f) + 'px';
var top = wrap + radius * Math.cos(f) + 'px';
$('#wrap img').eq(i).css({'top':top,'left':left}); // Устанавливаем значения каждой картинке
}
});
Ну и вам, наверно, надо будет еще добавить функцию для определения числа картинок. Ну и при клике на картинку открывается видео (это уже как вы сами решите, можно и модальное окно).
Простой
