Загрузочное встраивание видео нестандартного размера, не принимающее максимальную высоту

Я встроил длинное видео в эту загрузочную карусель.

Телефонное видео на слайде 2 «не стандартного размера», т.е. имеет размер 4x5, поэтому я использовал собственный код:

class="vidbox embed-Response embed-Response-4by5"

/* Пользовательское соотношение сторон для видео 4x5 / .embed-response-4by5 { отступ-дно: 125%; / Соотношение сторон 5/4 */ }

масштабирование видео работает отлично, но оно не принимает МАКСИМАЛЬНУЮ ВЫСОТУ, например. 900 пикселей или 90vh

Я попытался добавить максимальную высоту к iframe и всем элементам div вокруг него.
Кажется, ничего не работает, оно не масштабируется до заданной максимальной высоты и не остается внутри контейнера.

Есть идеи?

последний код ниже:

см. второй слайд с видео с телефона... оно слишком высокое, без возможности установить максимальную высоту

<!DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <title>Multiple Responsive Slideshows</title>
  <!-- Bootstrap CSS -->
  <link href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel = "stylesheet">
  <style>
    body {
      background-color: violet;
      margin: 10px; /* Reset margin to 0 */
      padding: 0; /* Reset padding to 0 */
    }

    .container {
      background-color: green;
      margin-bottom: 50px;
      padding: 10px;
      display: flex;
      justify-content: center;
      align-items: center; }

    .slideshow-container {
      position: relative;
      width: 100%;
      margin: auto;
      overflow: hidden;
      background-color: #b9dbe5;
      display: flex; /* Use flexbox layout */
      justify-content: center; /* Center items horizontally */
      align-items: center; /* Center items vertically */
    }

    .carousel-item {
      text-align: center; /* Center images horizontally */
    }

    .slideshow-container img, 
    .slideshow-container iframe {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

    /* Show arrows only on hover */
    .slideshow-container:hover .prev, 
    .slideshow-container:hover .next {
      display: block;
    }

    .prev, .next {
      display: none;
      cursor: default; /* Change cursor to default */
      z-index: 1000;
      color: silver;
      font-weight: bold;
      font-size: 30px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: auto;
      padding: 16px;
      border-radius: 0 3px 3px 0;
      user-select: none;
      text-decoration: none; /* Remove underline */
    }

    .prev:hover, .next:hover {
      text-decoration: none; /* Remove underline */
      color: silver; /* Change color on hover */
    }

    .prev {
      left: 0;
    }

    .next {
      right: 0;
      border-radius: 3px 0 0 3px;
    }

    .prev.disabled, .next.disabled {
      pointer-events: none;
      opacity: 0.5;
    }
      
   /* //////// Media query ////////  */
    @media screen and (max-width: 650px) {
    body {
        background-color: goldenrod;
        
 /* Videos and can be full width on mobile */
      }
         .carousel-item img {
    width: 100% !important;
    padding: 0 !important;
  }

      .carousel-item iframe {
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
      }
        .vidbox {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
      }
    }

 /* Custom aspect ratio for 4x5 video */
    .embed-responsive-4by5 {
      padding-bottom: 125%; /* 5/4 aspect ratio */
    }
      
  </style>
</head>
<body>

<div class = "container" style = "max-width: 1000px">
  <div id = "myCarousel1" class = "slideshow-container carousel slide" data-ride = "carousel" data-interval = "false">
      
    <!-- Image Slides -->
    <div class = "carousel-inner">
        
      <div class = "carousel-item active">
        <img src = "https://source.unsplash.com/random/1200x600/?kitten" style = "padding: 30px;">   
        </div>
        
        
                  <!-- Video Slide -->
      <div class = "carousel-item">
          <div style = "max-height: 700px">
    <div id = "phone" class = "vidbox embed-responsive embed-responsive-4by5" style = "max-height: 700px; margin: auto; text-align: center;">
  <iframe src = "https://player.vimeo.com/video/912417077?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder = "0" allow = "autoplay; fullscreen; picture-in-picture" allowfullscreen style = "padding: 0px"></iframe>
      </div>
     </div>
    </div>
        
    
              <!-- Video Slide -->
      <div class = "carousel-item">
    <div id = "nochill" class = "vidbox embed-responsive embed-responsive-16by9" style = "max-width: 800px; margin: auto; text-align: center;">
  <iframe src = "https://player.vimeo.com/video/143374377?h=760ef66606&title=0&byline=0&portrait=0" frameborder = "0" allow = "autoplay; fullscreen; picture-in-picture" allowfullscreen style = "padding: 0px;"></iframe>
      </div>    
    </div>
        
        
   <!-- Navigation Arrows -->
   <!-- Navigation Arrows -->
    <a class = "prev" href = "#myCarousel1" data-slide = "prev">&#10094;</a>
    <a class = "next" href = "#myCarousel1" data-slide = "next">&#10095;</a>
  </div>
</div>


<!-- Bootstrap JS -->
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<!-- Navigation Click anywhere to navigate -->
<script>
  $(document).ready(function(){
    $('.carousel-inner').on('click', function(e) {
      if (e.pageX < $(this).width() / 2) {
        $(this).closest('.carousel').carousel('prev');
      } else {
        $(this).closest('.carousel').carousel('next');
      }
    });
  });
</script>
    
    
    
</body>
</html>

css bootstrap-4 bootstrap-5

14.04.2024 20:01

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Bootstrap v4 использует устаревший метод управления соотношением сторон, известный как «хак top-padding».

Короче говоря, при применении процентного вертикального заполнения к элементу уровня блока отступ будет рассчитываться на основе width, а не на основе height. До появления aspect-ratio в CSS это был удобный способ управления aspect-ratio среди некоторых других. И это работает кроссбраузерно.

Итак, то, что кажется высотой обертки, на самом деле является top-padding. Высота контента равна 0 (и она должна оставаться такой, чтобы сохранить aspect-ratio). Но из-за этого max-height не имеет никакого эффекта.

Однако вы можете контролировать max-height, контролируя max-width, поскольку вы уже знаете aspect-ratio.

Суммируя:

  /* max-height: 600px; */
  max-width: 480px;

При более внимательном рассмотрении реализации соотношения сторон начальной загрузки v4 по умолчанию кажется, что есть способ заставить max-height работать с элементом, используя трюк с верхним заполнением, добавив к нему псевдоэлемент :before с тем же процентным вертикальным заполнением. В этом случае:

.embed-responsive-4by5::before {
  padding-top: 125%;
}

привет, это ТАК полезно, спасибо. и использовать это как обходной путь для определения высоты тоже очень полезно. Могу ли я спросить - позволяет ли использование последней/новейшей версии начальной загрузки лучше контролировать подобные вещи? Могу ли я установить точную максимальную высоту? любопытно, стоит ли перестраиваться в более новой версии, если эта/другие важные вещи намного лучше/управляемы? еще раз спасибо.

— 14.04.2024 23:39

Единственное, что меня немного смущает, это то, что если вы используете «встроить адаптивный» с одним из стандартных размеров Bootstrap, например. 1x1 или 16x9, вы МОЖЕТЕ установить максимальную высоту, и она работает нормально (например, class = "vidbox embed-Response embed-Response-1by1" style = "max-width: 20vh;") ... это только если вы попробуете и создайте собственный адаптивный формат для встраивания, например. 4x5, эта максимальная высота не работает, и это меня смущает. Любые идеи?

— 14.04.2024 23:45

Это довольно интересно. Я присмотрелся и понял, что это связано с тем, что встроенные элементы по умолчанию имеют псевдоэлемент ::before с тем же top-padding, что и iframe видео. Итак, если вы добавите .embed-responsive-4by5::before { padding-top: 125%; } к своему, max-height должен начать работать. Я добавлю это в ответ.

— 15.04.2024 05:05

Ссылка: «Поможет ли использование последней/новейшей версии начальной загрузки лучше контролировать подобные вещи?». Вопрос слишком расплывчатый, чтобы на него можно было ответить. В целом, v5 предоставляет разработчикам больше возможностей управления и настройки, при этом отказываясь от зависимости jQuery и поддержки IE. Полный список изменений смотрите в разделе Переход на версию 5.

— 15.04.2024 05:24

спасибо, изменив css с помощью этого дополнительного ::, прежде чем это исправили. есть ли шанс, что ты поможешь мне понять, почему?

— 15.04.2024 18:35

14.04.2024 21:15

Можете ли вы проверить приведенное ниже решение? Надеюсь, это сработает для вас.

<!DOCTYPE html>
<html lang = "en">

<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <title>Multiple Responsive Slideshows</title>
  <!-- Bootstrap CSS -->
  <link href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel = "stylesheet">
  <style>
    body {
      background-color: violet;
      margin: 10px;
      /* Reset margin to 0 */
      padding: 0;
      /* Reset padding to 0 */
    }
    
    .container {
      background-color: green;
      margin-bottom: 50px;
      padding: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .slideshow-container {
      position: relative;
      width: 100%;
      margin: auto;
      overflow: hidden;
      background-color: #b9dbe5;
      display: flex;
      /* Use flexbox layout */
      justify-content: center;
      /* Center items horizontally */
      align-items: center;
      /* Center items vertically */
    }
    
    .carousel-item {
      text-align: center;
      /* Center images horizontally */
    }
    
    .slideshow-container img,
    .slideshow-container iframe {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }
    /* Show arrows only on hover */
    
    .slideshow-container:hover .prev,
    .slideshow-container:hover .next {
      display: block;
    }
    
    .embed-responsive-4by5.vidbox {
      padding-bottom: clamp(100px, 125%, 500px) !important;
    }
    
    .prev,
    .next {
      display: none;
      cursor: default;
      /* Change cursor to default */
      z-index: 1000;
      color: silver;
      font-weight: bold;
      font-size: 30px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: auto;
      padding: 16px;
      border-radius: 0 3px 3px 0;
      user-select: none;
      text-decoration: none;
      /* Remove underline */
    }
    
    .prev:hover,
    .next:hover {
      text-decoration: none;
      /* Remove underline */
      color: silver;
      /* Change color on hover */
    }
    
    .prev {
      left: 0;
    }
    
    .next {
      right: 0;
      border-radius: 3px 0 0 3px;
    }
    
    .prev.disabled,
    .next.disabled {
      pointer-events: none;
      opacity: 0.5;
    }
    /* //////// Media query ////////  */
    
    @media screen and (max-width: 650px) {
      body {
        background-color: goldenrod;
        /* Videos and can be full width on mobile */
      }
      .carousel-item img {
        width: 100% !important;
        padding: 0 !important;
      }
      .carousel-item iframe {
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
      }
      .vidbox {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
      }
    }
    /* Custom aspect ratio for 4x5 video */
    
    .embed-responsive-4by5 {
      padding-bottom: 125%;
      /* 5/4 aspect ratio */
    }
  </style>
</head>

<body>

  <div class = "container" style = "max-width: 1000px">
    <div id = "myCarousel1" class = "slideshow-container carousel slide" data-ride = "carousel" data-interval = "false">

      <!-- Image Slides -->
      <div class = "carousel-inner">

        <div class = "carousel-item active">
          <img src = "https://source.unsplash.com/random/1200x600/?kitten" style = "padding: 30px;">
        </div>


        <!-- Video Slide -->
        <div class = "carousel-item">
          <div style = "max-height: 700px">
            <div id = "phone" class = "vidbox embed-responsive embed-responsive-4by5" style = "max-height: 700px; margin: auto; text-align: center;">
              <iframe src = "https://player.vimeo.com/video/912417077?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder = "0" allow = "autoplay; fullscreen; picture-in-picture" allowfullscreen style = "padding: 0px"></iframe>
            </div>
          </div>
        </div>


        <!-- Video Slide -->
        <div class = "carousel-item">
          <div id = "nochill" class = "vidbox embed-responsive embed-responsive-16by9" style = "max-width: 800px; margin: auto; text-align: center;">
            <iframe src = "https://player.vimeo.com/video/143374377?h=760ef66606&title=0&byline=0&portrait=0" frameborder = "0" allow = "autoplay; fullscreen; picture-in-picture" allowfullscreen style = "padding: 0px;"></iframe>
          </div>
        </div>


        <!-- Navigation Arrows -->
        <!-- Navigation Arrows -->
        <a class = "prev" href = "#myCarousel1" data-slide = "prev">&#10094;</a>
        <a class = "next" href = "#myCarousel1" data-slide = "next">&#10095;</a>
      </div>
    </div>


    <!-- Bootstrap JS -->
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

    <!-- Navigation Click anywhere to navigate -->
    <script>
      $(document).ready(function() {
        $('.carousel-inner').on('click', function(e) {
          if (e.pageX < $(this).width() / 2) {
            $(this).closest('.carousel').carousel('prev');
          } else {
            $(this).closest('.carousel').carousel('next');
          }
        });
      });
    </script>



</body>

</html>

Я использовал padding-bottom: clamp(100px, 125%, 500px) !important; CSS, где 100 пикселей — это минимальное отступы, а 500 пикселей — максимальное. Вы можете изменить его в соответствии с вашими требованиями.

это также дало отличное решение, спасибо за помощь!

— 15.04.2024 18:36

15.04.2024 09:55