Галерея Side By Side с гибким дисплеем

Question

В настоящее время мне нужно собрать видео галерею, которая содержит основное видео и до 4 дополнительных видео.В этом случае я не могу сменить дом.

Я работал с flex, когда вспомогательные видео находились ниже основного видео, но мне нужно, чтобы вспомогательное видео отображалось вдоль правой стороны основного видео.Количество дополнительных видео может варьироваться (максимум 4) и должно масштабироваться, чтобы занимать всю высоту основного видео с интервалом 1rem.Я пытался использовать CSS-сетки, но мне нужно поддерживать IE, который оказывается проблематичным.

Вот пример того, что у меня сейчас есть: https://jsfiddle.net/gak13ro4/1/

HTML:

<div class="video-container">
  <div class="video"><div class="video-embed"><iframe width="854" height="480" frameborder="0" allowfullscreen="allowfullscreen" src="https://player.vimeo.com/video/25300082?autoplay=0"></iframe></div></div>
  <div class="video"><div class="video-embed"><iframe width="854" height="480" frameborder="0" allowfullscreen="allowfullscreen" src="https://player.vimeo.com/video/25300082?autoplay=0"></iframe></div></div>
  <div class="video"><div class="video-embed"><iframe width="854" height="480" frameborder="0" allowfullscreen="allowfullscreen" src="https://player.vimeo.com/video/25300082?autoplay=0"></iframe></div></div>
  <div class="video"><div class="video-embed"><iframe width="854" height="480" frameborder="0" allowfullscreen="allowfullscreen" src="https://player.vimeo.com/video/25300082?autoplay=0"></iframe></div></div>
  <div class="video"><div class="video-embed"><iframe width="854" height="480" frameborder="0" allowfullscreen="allowfullscreen" src="https://player.vimeo.com/video/25300082?autoplay=0"></iframe></div></div>
</div>

CSS:

.video-container {
  background-color: green;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.video-container .video {
  flex-basis: 20%;
  background-color: grey;
}

.video-container .video:first-child {
  flex-basis: 100%;
  padding-bottom: 1rem;
}

.video-embed {
  width: 100%;
  height: 100%;
  position: relative;
}

.video-embed:after {
  content: '';
  display: block;
  padding-bottom: 56.25%;
}

.video-embed > iframe {
    width: 100%;
    height: 100%;
    position: absolute;

}

Answer 1

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

Мне нужно было найти правильное отношение к первой ширине видео(самый большой со своим отступом) и шириной экрана.Ну вот, наконец-то я нашел (для видео с соотношением сторон 16/9):

r= (n-1)/n + 14p/9w * (n-1)/(n+1)

Где n - номер видео, p - ваш отступ, а w - экран с экраном.

Это решение, после того как вам нужно всего лишь поместить его в математическую систему для расчета видео и их контейнеров по ширине и высоте:

const videoRap = 0.5625; // 16/9
const padding = 16; // 1rem
const nVideo = $(".video").length;

var widthVideo,
    widthScreen,
    heightVideo,
    widthContainer,
    newHeight,
    rapp

function calc() {
    widthScreen = $(".video-container").outerWidth();
    rapp = (nVideo - 1) / (nVideo) + ((14 * padding) / (9 * widthScreen)) * ((nVideo - 1) / (nVideo + 1));

    widthContainer = parseInt(widthScreen * rapp, 10);
    widthVideo = parseInt(widthScreen - widthContainer, 10);

    newHeight = parseInt(((widthContainer - (padding * 2)) * videoRap) + (padding * 2), 10);
    heightVideo = parseInt((newHeight / (nVideo - 1)), 10);



    $(".video").css({
        "height": heightVideo,
        "width": widthVideo
    });
    $(".video-container .video:first-child").css({
        "width": widthContainer
    });
    $(".video-container").css({
        "height": newHeight
    });
}

Теперь вы можете указать, сколько видео вы хотите, jQuery выполняет все операции за вас: вы должны изменить только ваш отступ, если вы хотите изменить его.

const padding = 16; // 1rem

В CSS вы должны изменить только ваш «отступ» здесь:

.video-embed {
    margin:   auto;
    position: relative;
    height:   calc(100% - 2rem); /* your padding * 2 */
    width:    calc(100% - 2rem); /* your padding * 2 */
}

Это весь код в действии (я добавляю пример с 4 небольшими видео, но вы можете указать, сколько видео вы хотите):

$(function () {
	const videoRap = 0.5625; // 16/9
	const padding = 16; // 1rem
	const nVideo = $(".video").length;

	var widthVideo,
		widthScreen,
		heightVideo,
		widthContainer,
		newHeight,
		rapp

	function calc() {
		widthScreen = $(".video-container").outerWidth();
		rapp = (nVideo - 1) / (nVideo) + ((14 * padding) / (9 * widthScreen)) * ((nVideo - 1) / (nVideo + 1));

		widthContainer = parseInt(widthScreen * rapp, 10);
		widthVideo = parseInt(widthScreen - widthContainer, 10);

		newHeight = parseInt(((widthContainer - (padding * 2)) * videoRap) + (padding * 2), 10);
		heightVideo = parseInt((newHeight / (nVideo - 1)), 10);


		$(".video").css({
			"height": heightVideo,
			"width": widthVideo
		});
		$(".video-container .video:first-child").css({
			"width": widthContainer
		});
		$(".video-container").css({
			"height": newHeight
		});
	}

	calc();

	$(window).resize(function () {
		calc();
	});
});

* {
    box-sizing: border-box; 
}

.video-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column; 
    width: 100%;
}

.video{
    flex: 1 1 auto;
    width:auto;
    display:flex;
}

.video-container .video:first-child {
    height:100% !important;
}

.video-embed {
   margin:   auto;
   position: relative;
   height:   calc(100% - 2rem); /* your padding * 2 */
   width:    calc(100% - 2rem); /* your padding * 2 */
}

.video iframe {
  width: 100%;
  height: 100%;

  position: absolute;
}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">

<div class="video-container">
    <div class="video"><div class="video-embed"><iframe frameborder="0" allowfullscreen="allowfullscreen" src="https://player.vimeo.com/video/25300082?autoplay=0"></iframe></div></div>
    <div class="video"><div class="video-embed"><iframe frameborder="0" allowfullscreen="allowfullscreen" src="https://player.vimeo.com/video/25300082?autoplay=0"></iframe></div></div>
    <div class="video"><div class="video-embed"><iframe frameborder="0" allowfullscreen="allowfullscreen" src="https://player.vimeo.com/video/25300082?autoplay=0"></iframe></div></div>
    <div class="video"><div class="video-embed"><iframe frameborder="0" allowfullscreen="allowfullscreen" src="https://player.vimeo.com/video/25300082?autoplay=0"></iframe></div></div>
    <div class="video"><div class="video-embed"><iframe frameborder="0" allowfullscreen="allowfullscreen" src="https://player.vimeo.com/video/25300082?autoplay=0"></iframe></div></div>
</div>

Было действительно интересно найти решение с использованием только flexbox и некоторого javascript.Большое спасибо за вопрос!;)