Prevent svg from sliding off video player

[asasass]

When the YouTube video gets smaller, the svg starts sliding off it.

How do I prevent that from happening?
https://jsitor.com/H_sK8e2Bl

https://jsfiddle.net/48ontv29/

After you click on a play image, close the window smaller to see the home svg start sliding off it.

How do I keep the svg stuck to the YouTube video?

How it works is, after clicking the play svg it opens up where the svg on the YouTube player is visible.

When the YouTube Video gets smaller, the svg starts sliding off it.

How do I prevent that?

It starts out as this.

When the video gets smaller, this happens.

How do I prevent that from occurring?

I need to be using absolute here, right, or no?

.home {
  position: absolute;
  top: 200px;
  left: 0;
  width: 50px;
  height: 50px;
  fill: green;
  cursor: pointer;
}

				<div class="wrapa">
					<div class="video video-frame"></div>
					<svg class="home" width="100" height="100" viewBox="0 0 24 24" fill="green">
						<g id="home">
							<title>Home</title>
							<path
								d="M3 10.25V20C3 20.5523 3.44771 21 4 21H8.42857C8.98086 21 9.42857 20.5523 9.42857 20V13.2857H14.5714V20C14.5714 20.5523 15.0191 21 15.5714 21H20C20.5523 21 21 20.5523 21 20V10.25C21 9.93524 20.8518 9.63885 20.6 9.45L12 3L3.4 9.45C3.14819 9.63885 3 9.93524 3 10.25Z"
								stroke="red" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
						</g>
					</svg>

[asasass]

This seems to work.

Is doing it that way good?

https://jsfiddle.net/9gh85b26/

.home {
  position: absolute;
  top: calc(60% - 25px); /*25px is half the height of the svg*/
  left: 0px;
  width: 50px;
  height: 50px;
  fill: green;
  cursor: pointer;
}

[PaulOB]

@asasass

Is doing it that way good?

That should be ok and will place it off the vertical middle by 10%.