#rybak

Попробуйте добавить в ваш пример эти стили:

.carousel  {
   height: 170px;
}
.carousel-wrapper {
   overflow: hidden; 
}
.carousel-block {
   padding-bottom: 100px;
   margin-bottom: -100px;
}

Вот похожее обсуждение на английском

<jdoc:include type="modules" name="footer-col" style="section"/>

Это место для модуля (позиция).
В эту позицию выводится любой модуль через админку Joomla.

Все модули хранятся в папке "modules"

Чтобы изменить html структуру модуля и она не слетела при первом же обновлении Joomla, вам нужно будет создать переопределение модуля (Вот как это делать)

После того как система напишет вам "Переопределение создано", отправляйтесь папку templates в свой шаблон.
Там в папке html вы найдёте файлы в которых можно редактировать html структуру модуля. Обычно это файл default.php
Удачи!

Ищите по запросу "3d carousel"
или "3d carousel with popup"
Вот например

Вот тут можно сгенерировать image-map

По идее достаточно одного SVG элемента
Вот посмотри тут

На сколько я знаю стандартными возможностями html и css такую задачу не решить.
Посмотрите тут. Ребята занимаются похожими вещами
-------------------------------
У SVG есть своя родная анимация кстати (смотрите тут)
Но есть проблема с кроссбраузерностью.
-------------------------------
Еще один возможный вариант - нарисовать на канвасе (canvas). Но нужно владеть соответствующими знаниями.
-------------------------------
После всего этого обычная гифка кажется не таким уж плохим вариантом :)

Вот пользуйтесь на здоровье.

ну и для видео напишите ширину что-ли

.head_block video {
    width: 100%;
   }

Есть несколько способов для вертикального выравнивания
в интернете масса статей по этому вопросу
Попробуйте вот так, например

Вот как это делается
Вот демо
Если нужно сделать всё чётко, то одним css тут не обойтись.

Вот посмотри этот пример
Кажется это то, что ты ищешь.
Источник тут.