Загрузка...

Видео HTML

Тема в разделе Frontend создана пользователем xiaoxiaoxiao_inactive7499375 26 ноя 2023. (поднята 26 ноя 2023) 149 просмотров

Сортировать
  1. xiaoxiaoxiao_inactive7499375
    Скопировать BBCode
    xiaoxiaoxiao_inactive7499375 Автор темы 26 ноя 2023 Заблокирован(а) 71 21 авг 2023
    Как сделать так, чтобы видео в ширину было 100%, а высоту я мог корректировать? Видео сохраняет пропорции, и если я начинаю менять высоту и ставлю к примеру 700px, то ширина тоже меняется и похуй что там width: 100px; стоит. Если ставлю height: auto; то размер видео сильно большой, мне по итогу нужно чтобы ширина была 100% экрана, а height меньше.
    HTML
    <main>
    
        <div class="video-container">
    
            <video autoplay loop muted>
    
              <source src="media/Untitled00122494 (online-video-cutter.com).mov" alt="Your browser does not support the video tag.">
    
            </video>
    
            <div class="text-overlay">
    
              <h1 class="head">Типография</h1>
    
            </div>
    
        </div>
    
    </main>
    CSS
    video
    
{
    
    width: 100%;
    
    height: auto;
    
    pointer-events: none;
    
}
    

    
.video-container {
    
    position: relative;
    
  }
    
 
    
  .text-overlay {
    
    position: absolute;
    
    top: 70%;
    
    left: 20%;
    
    transform: translate(-50%, -50%);
    
  }
    
 
    
  .head {
    
    color: white;
    
    font-size: 24px;
    
    text-align: center;
    
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    
  }
     
    26 ноя 2023
  2. ChatGPT
    Скопировать BBCode
    ChatGPT 26 ноя 2023 2253 14 мар 2023
    xiaoxiaoxiao_inactive7499375, чтобы сделать видео в ширину 100% экрана, а высоту можно было корректировать, можно использовать следующий CSS код:

    CSS

    
.video-container {
    
  position: relative;
    
  width: 100%;
    
  height: 0;
    
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
    
}
    

    
.video-container video {
    
  position: absolute;
    
  top: 0;
    
  left: 0;
    
  width: 100%;
    
  height: 100%;
    
}
    

    
.text-overlay {
    
  position: absolute;
    
  top: 70%;
    
  left: 20%;
    
  transform: translate(-50%, -50%);
    
}
    

    
.head {
    
  color: white;
    
  font-size: 24px;
    
  text-align: center;
    
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    
}
    В этом коде мы используем относительное позиционирование для контейнера видео и задаем ему ширину 100% и высоту 0. Затем с помощью отступа padding-bottom мы создаем пропорции 16:9 для видео. Видео позиционируется абсолютно внутри контейнера и занимает всю его ширину и высоту.

    Теперь вы можете корректировать высоту контейнера видео, изменяя значение padding-bottom. Например, если вы хотите, чтобы высота была 500px, вы можете изменить значение padding-bottom на 31.25%:

    CSS

    
.video-container {
    
  padding-bottom: 31.25%; /* 500px height */
    
}
    Надеюсь, это поможет! Если у вас возникнут еще вопросы, пожалуйста, дайте мне знать.
     
    26 ноя 2023
    1. Посмотреть предыдущие комментарии (1)
    2. ChatGPT
      xiaoxiaoxiao_inactive7499375, извините за путаницу. Если вы хотите сохранить ширину видео на 100% экрана и иметь возможность корректировать высоту, вы можете использовать JavaScript для динамического изменения высоты видео.

      Вот пример кода:

      HTML

      
<main>
      
  <div class="video-container">
      
    <video id="myVideo" autoplay loop muted>
      
      <source src="media/Untitled00122494 (online-video-cutter.com).mov" alt="Your browser does not support the video tag.">
      
    </video>
      
    <div class="text-overlay">
      
      <h1 class="head">Типография</h1>
      
    </div>
      
  </div>
      
</main>
      CSS

      
.video-container {
      
  position: relative;
      
  width: 100%;
      
  height: 0;
      
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
      
}
      

      
.video-container video {
      
  position: absolute;
      
  top: 0;
      
  left: 0;
      
  width: 100%;
      
  height: 100%;
      
  object-fit: cover;
      
}
      

      
.text-overlay {
      
  position: absolute;
      
  top: 70%;
      
  left: 20%;
      
  transform: translate(-50%, -50%);
      
}
      

      
.head {
      
  color: white;
      
  font-size: 24px;
      
  text-align: center;
      
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
      
}
      JavaScript

      
window.addEventListener('resize', resizeVideo);
      

      
function resizeVideo() {
      
  var videoContainer = document.querySelector('.video-container');
      
  var video = document.getElementById('myVideo');
      
  var aspectRatio = 16 / 9; // Задайте соотношение сторон вашего видео
      

      
  var containerWidth = videoContainer.offsetWidth;
      
  var containerHeight = containerWidth / aspectRatio;
      

      
  video.style.height = containerHeight + 'px';
      
}
      

      
// Вызовите функцию resizeVideo при загрузке страницы
      
window.addEventListener('load', resizeVideo);
      В этом примере мы добавили JavaScript код, который будет изменять высоту видео в зависимости от ширины контейнера при изменении размера окна браузера. Мы используем соотношение сторон 16:9 для примера, но вы можете изменить его на нужное вам соотношение.

      Надеюсь, это поможет! Если у вас возникнут еще вопросы, пожалуйста, дайте мне знать.
      26 ноя 2023
    3. xiaoxiaoxiao_inactive7499375 Автор темы
      ChatGPT, хуйня друг, не работает
      26 ноя 2023
    4. ChatGPT
      xiaoxiaoxiao_inactive7499375, извините за предоставленную информацию. Я понимаю ваше разочарование. Позвольте мне предложить вам другой подход для достижения желаемого результата.

      Вы можете использовать CSS свойство `object-fit` для контроля отображения видео внутри контейнера. Установив значение `object-fit: fill;`, вы можете растянуть видео на всю ширину контейнера и задать высоту по вашему выбору.

      Вот пример кода:

      HTML

      
<main>
      
  <div class="video-container">
      
    <video autoplay loop muted>
      
      <source src="media/Untitled00122494 (online-video-cutter.com).mov" alt="Your browser does not support the video tag.">
      
    </video>
      
    <div class="text-overlay">
      
      <h1 class="head">Типография</h1>
      
    </div>
      
  </div>
      
</main>
      CSS

      
.video-container {
      
  position: relative;
      
  width: 100%;
      
  height: 0;
      
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
      
}
      

      
.video-container video {
      
  position: absolute;
      
  top: 0;
      
  left: 0;
      
  width: 100%;
      
  height: 100%;
      
  object-fit: fill;
      
}
      

      
.text-overlay {
      
  position: absolute;
      
  top: 70%;
      
  left: 20%;
      
  transform: translate(-50%, -50%);
      
}
      

      
.head {
      
  color: white;
      
  font-size: 24px;
      
  text-align: center;
      
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
      
}
      В этом примере мы используем `object-fit: fill;` для видео, чтобы оно растягивалось на всю ширину контейнера и заполняло его полностью. Теперь вы можете задать высоту контейнера видео по вашему выбору, изменяя значение `padding-bottom`.

      Если у вас возникнут еще вопросы или проблемы, пожалуйста, дайте мне знать. Я всегда готов помочь.
      26 ноя 2023
  3. Dandaleon
    Кому понравилось (1) Скопировать BBCode
    Dandaleon 26 ноя 2023 20 9 сен 2023
    object-fit: cover к video либо object-fit: fill, в зависимости как ты хочешь его растягивать
     
    26 ноя 2023 Изменено
Загрузка...
Top