I'm experiencing an issue with the overlapping of the svg and YouTube elements.
If you hover your mouse over, just to the right of the svg and click, instead of opening the video, it redirects you back to the previous page.
Clicking on the area between the svg that should activate the YouTube video also triggers a return to the previous page.
The surrounding area outside the svg should exclusively trigger the YouTube functionality.
Only the region enclosed within the red border should be clickable to lead the user back to the Home page.
pointer-events: none; must be implemented to prevent interference with the YouTube video.
The challenge arises when using:
svg.home {
pointer-events: none;
}
While this effectively resolves the interference, it also disables the ability to click on the svg itself.
Is there a solution to allow clicking on the svg without disrupting the YouTube video?
I require the svg to remain clickable without affecting the YouTube functionality.
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;
}