0

Как сделать объект-fit: cover; как в css. Видео обрезано по бокам. Как это исправить? Я хочу поместить его на фон сайта.

iframe code : <iframe src="https://player.vimeo.com/video/767578091?background=1&muted=1&autoplay=1&dnt=1" width="100%" height="100%" frameborder="0" allow="autoplay; encrypted-media;" allowfullscreen></iframe> enter image description here

Я прочитал это руководство, но оно помогло лишь сделать его фоновым и не растянуло. Есть идея растянуть с помощью scale, но думаю что лучше это сделать с готовыми методами если таковые есть. Я руководствовался официальным гайдом: ссылка

2 ответа 2

0

Как-то так?

.iframe-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.iframe-wrapper iframe {
  width: 100vw;
  height: 56.25vw;
  min-height: 100vh;
  min-width: 177.77vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

h1 {
    color: white;
}
p {
    color: gold;
}
a {
    color: lime;
}
 <div class="iframe-wrapper">
 <iframe
 src="https://player.vimeo.com/video/767578091?background=1&muted=1&autoplay=1&dnt=1" webkitallowfullscreen
 mozallowfullscreen allowfullscreen></iframe>
 </div>
 <h1>Demo</h1>
 <p>Плохо ищете.) <a href="https://stackoverflow.com/a/37309881/8206804">Взято здесь.</a></p>

1
  • пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 5 ноя 2022 в 14:33
0

Измените width (ширина) и height (высота) до нужных размеров (пикселях)

2
  • Или max-width и max-height
    – M389F
    5 ноя 2022 в 14:14
  • пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 5 ноя 2022 в 14:15

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.