UI Alignment Issue - css

Question

Hope after so many tries I will get some pointers over here for issue i am facing.
As per above image, I need to have an POI in center of page(round circle in the image) and when I click on POI; I would like to open a pop up window in four position at shown in the image above with different css classes. Problem is that popup height can not be fixed and should be auto and that is where its tricky to handle the margin if I would like to achieve above UI.
Issues:
any pointers on positioning the popup with css classes as per images shown.
I have setup a fiddle here including popup and POI.
HTML:
<div id="follow-hotspot" class="hotspot-wrapper">
<img width="20px" heigh="20px" class="hotspot" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-contact-512.png"/>
<div id="follow-textbox" class="textbox_hotspot hide" data-video="true">
<h1>Header</h1>
<p>
<b>Follow me</b> to see the css video
</p>
<iframe id="follow_video" width="230" height="150" src="https://www.youtube.com/embed/9YffrCViTVk" frameborder="0" id = "Overlayvideo" allow="accelerometer; autoplay *; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
JavaScript:
Let me know if any details are required. Any pointer how to achieve is ample enough; I am not expecting you to write code for me. How would I go about the implementation is all I am expecting.
//annonymous function
var poi = document.getElementById("follow-hotspot");
var popup = document.getElementById("follow-textbox");
poi.onclick = function() {
//alert("clicked");
if (popup.classList.contains('hide')) {
popup.classList.remove('hide');
popup.classList.add('show');
}
else if (popup.classList.contains('show')) {
popup.classList.remove('show');
popup.classList.add('hide');
videoEle = document.getElementById('follow_video');
videoEle.src = videoEle.src;
}
};
CSS:
Please refer to the fiddle for css.

Answer 1

I used translate property to give position to these content blocks and used percentage as units.I checked the output on changing the height and width of the content and still the position remained intact.
Glimpse of the output(->its The output)
var point_er = document.getElementsByClassName('pointer')[0];
var win_dow = document.getElementsByClassName('window');
var count = 0;
point_er.onclick = function() {
if (count % 2 == 0) {
for (var i = 0; i < win_dow.length; i++) {
win_dow[i].style.height = "250px";
win_dow[i].style.width = "300px";
}
win_dow[2].style.height = "300px";
win_dow[3].style.width = "400px";
} else {
for (var i = 0; i < win_dow.length; i++) {
win_dow[i].style.height = "0px";
win_dow[i].style.width = "0px";
}
}
count++;
}
* {
margin: 0px;
padding: 0px;
}
body {
height: 2400px;
}
.main {
width: 100%;
height: 100vh;
}
.window_main {}
.window {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0px;
height: 0px;
border: 2px solid black;
}
.window:nth-child(1) {
transform-origin: 100% 100%;
transform: translate(-105%, -105%);
transition: 0.4s;
}
.window:nth-child(2) {
transform-origin: 0 100%;
transform: translate(5%, -105%);
transition: 0.5s;
}
.window:nth-child(3) {
transform-origin: 100% 0;
transform: translate(-105%, 5%);
transition: 0.6s;
}
.window:nth-child(4) {
transform-origin: 0% 0%;
transform: translate(5%, 5%);
transition: 0.7s;
}
.pointer {
text-decoration: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
height: 50px;
width: 50px;
background-color: #8B8AFF;
cursor: pointer;
transition: 0.4s;
}
.pointer:hover {
background-color: #6D6DE8
}
<div class="main">
<div class="window">1</div>
<div class="window">2</div>
<div class="window">3</div>
<div class="window">4</div>
</div>