2

Не могу сделать круглое видео. В сhrome все роботает, а в Edge не знаю как сделать

Как сделать чтобы видео было по всему кругу, а не только по центру? Не могу растянуть видео....

body {
    padding: 16px;
}

video {
    -o-object-fit: cover;
    object-fit: cover;
    width: 34vw;
    height: 33vw;
    border-radius: 100% 100% 100% 100%;
    -webkit-box-shadow: 0px 1px 5px 17px #adddf3;
    box-shadow: 0px 1px 5px 17px #adddf3;
    padding-bottom: 0vw;
    padding-top: 0vw;
    padding-left: 0vw;
    padding-right: 0vw;
    margin-right: 5vw;
}
<video src="https://i.imgur.com/6ucWers.mp4" autoplay loop />

скриншот

Результат в IE:

Результат в IE

7
  • 1
    Выложите ваш код в сниппет чтоб удалось воспроизвести что не работает или не так работает и тогда вам помогут.
    – Nilsan
    24 окт 2018 в 10:07
  • 2
    Edge не поддерживает object-fit для видео. Оборачивайте видео в див, и все стили кружочка присваивайте уже диву
    – andreymal
    24 окт 2018 в 10:27
  • Пока поддержка только картинок
    – Grundy
    24 окт 2018 в 10:55
  • Пожалуйста, не надо задавать однотипные вопросы.
    – A K
    24 окт 2018 в 13:53

4 ответа 4

3

video {
  border-radius: 50%;
}
<video autoplay loop muted>
  <source src="//www.w3schools.com/html/movie.mp4" type="video/mp4">
  <source src="//www.w3schools.com/html/movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

4
  • 2
    что-то приплюснутое какое-то :)
    – Grundy
    24 окт 2018 в 12:01
  • @Grundy, чтобы было совсем круглое, надо взять квадратное видео, а у меня нет :)
    – Qwertiy
    24 окт 2018 в 14:04
  • @Qwertiy, на самом деле вся соль в квадратной обёртке - видео может быть любой формы и любого размера. 24 окт 2018 в 15:25
  • @Grundy, запостил ещё ответ для квадраторезки.
    – Qwertiy
    24 окт 2018 в 18:38
2

Если нужно обрезать горизонтальное видео под круг на основе его высоты, то можно сделать так:

section {
  overflow: hidden;
  border-radius: 50%;
  width: 85vmin;
  position: relative;
}

section::before {
  content: "";
  padding-top: 100%;
  display: block;
}

video {
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  transform: translateX(-50%);
}
<section>
  <video autoplay loop muted>
    <source src="//www.w3schools.com/html/movie.mp4" type="video/mp4">
    <source src="//www.w3schools.com/html/movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
  </video>
</section>

1

Задаёте блоку .videocontainer какие-то квадратные размеры (типа там 400 на 400), border-radius: 50% и - обязательно - overflow: hidden.

А видео задаёте height: 100%;

1

Для тега <video> можно использовать свойство object-fit: cover;

section {
  display: block;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 3px 10px #adddf3;
  margin: 13px;
}

section > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
<section>
  <video autoplay loop muted>
    <source src="//www.w3schools.com/html/movie.mp4" type="video/mp4">
    <source src="//www.w3schools.com/html/movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
  </video>
</section>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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