Как добавить иконки вне закругленного круга с помощью CSS?

Question

У меня есть видео внутри круга, теперь я хочу добавить значки вне круга.

Вот как я хочу, чтобы это выглядело.

Вот что я пробовал до сих пор

body,
html {
  overflow: hidden;
  margin: 0px;
  padding: 0px;
}

.video-conatiner_datavideo {
  width: 250px;
  height: 250px;
  border-radius: 125px;
  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
  position: absolute;
  bottom: 0px;
  right: 0px;
}

video {
  width: 500px;
  height: 500px;
  position: absolute;
  top: -125px;
  left: -125px;
}

<div class="video-container">
  <div class="video-container_details">
    <img src="/videoexplainer/images/camera.png">
    <img src="/videoexplainer/images/close_button.png">
    <img src="/videoexplainer/images/pause_button.png">
  </div>
  <div class="video-conatiner_datavideo">
    <video controls>
                <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
            </video>
  </div>
</div>

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

Что мне нужно изменить, чтобы получить то, что я хочу?

Answer 1

Я подозреваю, что этот эскиз может быть лучше закодирован с использованием свойства CSS transform-origin или matrix. Но в в моем примере я вычислял для каждого конкретного случая 70 + 150*cos(x), а 70 - 150*sin(x) для x равняется кратным pi/6 (это было не так уж страшно).

#circone{
  margin: 100px;
  position: relative;
  background-color: #f00;
  width: 200px;
  height: 200px;
  border-radius: 100px;
}

.cism {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 30px;
}

#twoa {transform:translate(70px, -80px);background-color:#0f0}
#twob {transform:translate(145px, -60px);background-color:#00f}
#twoc {transform:translate(200px, -5px);background-color:#ff0}
#twod {transform:translate(220px, 70px);background-color:#f0f}
#twoe {transform:translate(200px, 145px);background-color:#0ff}

<div id="circone">
  <div class="cism" id="twoa"> </div>
  <div class="cism" id="twob"> </div>
  <div class="cism" id="twoc"> </div>
  <div class="cism" id="twod"> </div>
  <div class="cism" id="twoe"> </div>
</div>

Затем вы можете использовать разные background-image для каждого из кругов или видео, если хотите.