スライダーの枠に動画を収めるにはどのように修正すれば良いでしょうか？

ファイルアップロードが可能な質問掲示板から投稿された動画を横スライダーで５件表示させたいと考えております。

初めは object-fit: cover; により拡大することで動画をスライド１枚の横幅に合わせるように調整したのですが、動画を横に拡大したことで画質を高く拡大が荒くなる問題が生じた為、修正方法についてアドバイスをお聞きいたしました。

※頂いたアドバイス
親要素に対して適切に寸法指定がなされていない場合には予期しない表示になることがあるようなので、動画の width, height に関係する CSS は全て指定したうえで、一番上の親要素に横幅を指定した
方が良い。

上記の通りに修正したところ上手くいっていたのですが、動画の数を５件からアップロードされた数に変更したところ、スライド１件目の領域にスライド２件目が表示されるようになってしまいました。
何故このようなことが起こるのか原因は分かりますでしょうか？

※現在のスクロール
https://imgur.com/UCv4Sxu.gif

※該当コード
https://wandbox.org/permlink/3zqZGcHoVl0Yk3q7

※横スライダーHTML
<div class="carousel-area">
<!-- スライド（コンテンツ） -->
<div id="carousel" class="carousel" style="transform: translateX(-20%);">

<div class="carousel-container">
<div class="carousel-video-area" style="display: inline-block;">
<a href="">
<div class="carousel-video-wrap">
<video class="carousel-video-streaming" src="" type="video/mp4" autoplay="" muted="" loop=""></video>
</div>
<div class="carousel-video-title"><script>document.write(truncate("タイトルテスト2タイトルテスト2タイトルテスト2タイトルテスト2タイトルテスト2タイトルテスト2タイ",19));<script>タイトルテスト2タイトルテスト2タイト...</div>
</a>
</div>
</div>
<div class="carousel-container">
<div class="carousel-video-area" style="display: inline-block;">
<a href="">
<div class="carousel-video-wrap">
<video class="carousel-video-streaming" src="" type="video/mp4" autoplay="" muted="" loop=""></video>
</div>
<div class="carousel-video-title"><script>document.write(truncate("タイトルテスト１タイトルテスト１タイトルテスト１タイトルテスト１タイトルテスト１タイトルテスト１タイ",19));<script>タイトルテスト１タイトルテスト１タイト...</div>
</a>
</div>
</div> </div>
<!-- 左右のボタン -->
<span id="prev" class="prev"></span>
<span id="next" class="next"></span>
<!-- インジケーター -->
<ul class="indicator" id="indicator">
<li class="list"></li><li class="list active"></li> </ul>
</div>

※横スライダーCSS
<style>
li {
list-style: none;
}
/* ↓ スライドの外枠 */
.carousel-area {
width: 50%;
height: 300px;
position: relative;
overflow: hidden;
/* はみ出したスライドを隠す */
}

/* ↓ スライド（コンテンツ） */
.carousel {
/*スライド全体 */
width: 500%; /*スライドが5枚なので100%に5をかける */
height: 100%;
display: flex;
   transition: all 4s;
}

/* ↓ スライドの内枠 */
.carousel-container {
   width: 100%; /*スライド1枚分なので100％ */
height: 300px;
}

.carousel-video-area {
position: relative;
   width: 300px;
height: 300px;
}

.carousel-video-wrap {
width: 100%;
height: 300px;
}

.carousel video { /* 質問掲示板　一覧表示画面の動画配置位置 */
width: 100%;
height: 100%;
object-fit: cover;
}

.next, .prev { /* スライド */
position: absolute;
width: 15px;
height: 15px;
bottom: 50%;
z-index: 10;
cursor: pointer;
border-top: solid 3px #fff;
border-right: solid 3px #fff;
}

/* ↓ 左右のボタン */
.next {
right: 10px;
transform: rotate(45deg) translateY(50%);
}
.prev {
left: 25px;
transform: rotate(-135deg) translateY(-50%);
}

/* ↓ インジケーター */
.indicator {
width: 100%;
position: absolute;
bottom: 20px;
display: flex;
column-gap: 18px;
z-index: 10;
justify-content: center;
align-items: center;
}

.indicator li {
width: 14px;
height: 14px;
border-radius: 50%;
background-color: rgba(255,255,255,.4);
border: 2px #000 solid;
cursor: pointer;
}

.indicator li.active {
background-color: #fff;
}

.carousel-video-title {
position: absolute;
top: 75%;
left: 50%;
white-space: nowrap;
transform: translateX(-50%);
font-size: 25px;
font-weight: 700;
color: #fff;
}
</style>

No.1 回答者： fujillin 回答日時： 2024/08/10 22:04

こんばんは

読み取るのが面倒そうなので、ご質問文だけを読んでの推測ですけれど・・

＞スライド１件目の領域にスライド２件目が表示されるように
＞なってしまいました。
＞何故このようなことが起こるのか原因は分かりますでしょうか？
単純に、スライダーと動画のサイズが合っていないだけではないでしょうか？
スライダーのサイズの方が動画のサイズよりも大きい場合に、動画を横並びで並べていれば、次の動画が余白部分に見えてきているという事ではありませんか？

ご提示のＨＴＭＬを見ると、div要素がかなりネストしているので、スライド1枚のラッパに当たる要素があるものと推測します。
その要素のサイズをスライダーのサイズに合わせておいて、その中で動画等を配置するようにしておけば、余白の部分は余白として表示されるようになるでしょう。
（各動画のサイズがバラバラの場合でも、この方法であれば対応可能と思います）

動画のサイズが全て同じなら上記のような考慮は不要で、スライダーの表示サイズと合わせておくだけでもすむのではないでしょうか。