How to add icons outside rounded circle using css?

Question

I have a video inside a circle, now I want to add Icons outside the circle.

This is how I want it look like .

Here is what I have tried so far

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>

to be honest I tried different ways but unfortunately, I came up with nothing. am out of Ideas.

What do I need to change to get what I want?

Related - https://stackoverflow.com/questions/39020670/rotate-objects-around-circle-using-css — Paulie_D, Apr 01 '19 at 15:02
@user9964622 Above link has the proper solution. but, if you don't want to go with the answer in above link, take a look at this snippet https://codepen.io/Divine1/pen/yryMza . — divine, Apr 01 '19 at 15:26

score 1 · Accepted Answer · answered Apr 17 '19 at 22:12

I suspect this sketch could be better coded using CSS transform-origin property or matrix function. But in my example I calculated case by case 70 + 150*cos(x) and 70 - 150*sin(x) for x equals to multiples of pi/6 (that wasn't too terrible).

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

Then you can use a different background-image for each one of the circles, or videos if you like.

how to make those circle appear left side instead of the right side? — The Dead Man, Apr 18 '19 at 09:35

How to add icons outside rounded circle using css?

1 Answers1