Радиус границы не работает на определенных телефонах Android - PullRequest
Новая
       9

Радиус границы не работает на определенных телефонах Android

0 голосов
/ 17 октября 2019

У меня есть простой раздел, в котором я добавил границы радиуса, к сожалению, я тестировал на телефонах Android, например, xiaomi redmi note 4, xiaomi redmi 3 pro, motorola g6, радиус границы не работает

Вот HTML 

<div class="video-conatiner_datavideo">
                    <video class="videoplayer-datavideo" id="videoplayer"
                        playsinline autoplay muted>
                        <source src="videos/welcome_middle_generyczny_bot.mp4"
                            type="video/mp4">
                    </video>
                </div>

Вот CSS 

.videoplayer-datavideo {
    width: 250px;
    height: 250px;
    border-top-left-radius: 300px;
    border-top-right-radius: 300px;
    border-bottom-left-radius: 300px;
    border-bottom-right-radius: 300px;
}

Я пытался перейти на это 

.videoplayer-datavideo {
    width: 250px;
    height: 250px;
    border-radius: 300px;
    -webkit-border-radius: 300px;
    -moz-border-radius: 300px;
    -ms-border-radius: 300px;
    -o-border-radius: 300px;
}

Все еще не работает

Но когда я пробую на айфонах и других устройствах с Android все в порядке

Вот живая демонстрация: Живая демонстрация

Что мне нужно сделать, чтобы решить эту проблему?

1 Ответ

0 голосов
/ 17 октября 2019

Вы можете использовать этот код 

body {
  margin: 0;
}

.videoplayer-datavideo {
  width: 250px;
  height: 250px;
  border-radius: 100%;
  background-color: #dddddd;
}
<div class="video-conatiner_datavideo">
  <video class="videoplayer-datavideo" id="videoplayer" playsinline autoplay muted>
      <source src="videos/welcome_middle_generyczny_bot.mp4" type="video/mp4">
  </video>
</div>
...