.gallery {
  display: flex;
  flex-flow: wrap;
  border: solid rgb(240,240,240);
}
.gallery div {  /* блоки видео + списков */
  flex: 150px;
  position: relative;
  text-align: center;
}
.gallery div:nth-of-type(1) {
  flex: 10000 1 300px;  /* если ширина менее 300 + 150 = 450px , то списки миниатюр смещаются на нижний ряд, подробнее про свойство flex */
}
.gallery div::before {
  content: "";
  display: block;
  padding-top: 100px;
}
.gallery div:nth-of-type(1)::before {
  padding-top: 56.25%;
}
.gallery iframe,
.gallery span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.gallery a {  /* для разнообразия, иконки не затемнены, так проще оценить код галереи видео */
  display: inline-block;
  margin-top: 5px;
}
.gallery a:last-child {
  margin-bottom: 5px;
}
.gallery iframe,
.gallery img {
  max-width: 100%;
  vertical-align: middle;
}