Работа с отзывчивыми видео и дополнением

Question

Я собрал быстрый веб-сайт для друга для кучи динамиков, которые у нее есть. Все отлично, но по какой-то причине прокладка, которую я помещаю в нижнюю часть моего видеоконтейнера, делает это так, что если нет видео, там есть это огромное пространство. Для жизни я не знаю, что еще нужно сделать, чтобы эти видео реагировали, но имейте это в виду, если на странице нет видеороликов, это не создает такой большой пробел.

Это фрагмент кода с веб-сайта, на котором я его взял, чтобы сделать все видеочувствительным (вы затем оберните код видео встраивания в пару разделов).

.video-container iframe, 
.video-container object, 
.video-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

Вот мой CSS для видео контейнера

.video-container { 
    position: relative; 
    padding-bottom: 54.5%; 
    padding-top: 30px; height: 0; overflow: hidden; 
} 

Вот пример огромного разрыва, когда нет видео не представлено - http://spellbindersspeakers.org/speaker/yvonne-thompson

Это то, что она должна выглядеть, когда есть видео и отзывы, представленные - http://spellbindersspeakers.org/speaker/roslyn-franken

Если нет видео для динамика, я не хочу иметь этот большой промежуток. Я просто хочу, чтобы отзывы оставались прямо под кнопками или содержимым сверху.

Спасибо за помощь.

Answer 1

Его немного взломать, но с помощью селектора css :empty на видеоконтейнере вы сможете установить вас здесь. не

.video-container:empty { 
    display: none; 
} 

Конечно, не отображая элемент контейнера видео в разметке вообще было бы лучше, если нет каких-либо видео.