I'm having an issue with the svg being over the YouTube.

If you put your mouse over, just off to the right side of the svg and click, the video doesn't open, instead, it takes you back to the previous page.

Clicking on the space in-between the svg, that should open the YouTube video, it doesn't, instead, it takes you back to the previous page.

Everything outside the svg should be YouTube.

Only the area within the red line only should be clickable taking the user to Home

pointer-events: none; would need to be in place, or it interferes with the YouTube video.

The issue with using:

svg.home {
 pointer-events: none;
}

While that works with the svg not interfering, it also disables being able to click on the svg.

How would this be fixed?

I need the svg to be able to be clicked, and not interfere with the YouTube.

https://jsfiddle.net/hwm8qtoz/1/

.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;
}