帶柔性顯示屏的並排畫廊

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 的解決方案真的很有趣。 非常感謝您的提問！ ;)