Question

当前，我需要将一个视频库放在一起，其中包含一个主视频和最多4个子视频。在这种情况下，我无法更改dom。

我在子视频位于主视频下方的情况下使用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的解决方案真的很有趣。非常感谢您的提问！ ;）

并排显示和柔性显示屏

1 个答案: