Text over Video on hover, still allowing video to be played

Hi there,

I am trying to customize my homepage so that text will appear over my Vimeo embedded video that has a custom jpg. thumb page. 

My issue: As you will see on my site (URL below), the text appears over the video perfectly, however, the block/video behind it is not accessible anymore. Is there a code I can add that could resolve this issue? Thank you

Here is my current CODE (is in CSS do I need HTML or JS for this?):

#block-yui_3_17_2_1_1670503373785_912328,#block-yui_3_17_2_1_1684500049665_3493:hover {
  cursor: pointer;
}
@media only screen and (min-width: 640px){
#block-yui_3_17_2_1_1684920682664_10348 {
opacity: 0;
 transition: opacity 1s
}

#block-yui_3_17_2_1_1684920682664_10348:hover {
opacity: 1;
transition: opacity 1s
}
}

My site URL: https://www.lucvrhovnik.com/