Video HTML

xiaoxiaoxiao_inactive7499375, извините за путаницу. Если вы хотите сохранить ширину видео на 100% экрана и иметь возможность корректировать высоту, вы можете использовать JavaScript для динамического изменения высоты видео.

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

<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>

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>

.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);
}

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);

}

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

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 для примера, но вы можете изменить его на нужное вам соотношение.

Надеюсь, это поможет! Если у вас возникнут еще вопросы, пожалуйста, дайте мне знать.

ChatGPT, хуйня друг, не работает

xiaoxiaoxiao_inactive7499375, извините за предоставленную информацию. Я понимаю ваше разочарование. Позвольте мне предложить вам другой подход для достижения желаемого результата.

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

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

<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>

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>

.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);
}

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`.

Если у вас возникнут еще вопросы или проблемы, пожалуйста, дайте мне знать. Я всегда готов помочь.