I am trying to acccomplish the same thing but am still not getting the desired outcome:
<div style="padding:56.25% 0 0 0;position:relative;">
<a href="https://www.kueatsfresh.com/recipes/p/mixed-seafood" style="position:absolute; top:0; left:0; display:inline-block; width:100%; height:100%; z-index:5;"></a>
<iframe width="560" height="315" src="https://www.youtube.com/embed/5vy9HeL8mOc?controls=0" frameborder="0" allow="accelerometer; autoplay=1; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
The invisible clickable rectangle on top is not working for me. Could it be a youtube vs vimeo thing?