Add a link to vimeo video on Shopify - html

Question

On our site, we use vimeo to display a carousel video of "signature styles" on our homepage. I would like to add a link so that when you click this video, it will direct you the a "signature styles" page.
I am new to using liquid/shopify. I know how to do this in HTML, but it doesn't appear to be working like I thought.
Here is the original code in the "background-video.liquid" file:
<section class="Section" id="section-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="background-video" data-section-settings='{{ section_settings }}'>
<div class="ImageHero {% if section.settings.section_size != 'normal' %}ImageHero--{{ section.settings.section_size }}{% endif %}">
<div class="ImageHero__VideoHolder"></div>
</div>
</section>
And here is some code I tried to replace the above lines with:
<a href="https://www.clarasunwoo.com/search?q=signature+styles&type=product">
<div style="padding:56.25% 0 0 0;position:relative;">
<iframe src="https://vimeo.com/540236561" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div><script src="https://player.vimeo.com/api/player.js"></script>
</a>

Answer 1

All you need to do is create an overlay div that "blocks" the actual iframe from being interacted with via z-index. You can then use JavaScript to handle the click and redirection of the user.
<div style="padding: 56.25% 0 0 0; position: relative">
<iframe
src="https://vimeo.com/540236561"
style="
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
"
frameborder="0"
allow="autoplay; fullscreen"
allowfullscreen
></iframe>
<div class="overlay" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 99;"></div>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
const overlay = document.querySelector(".overlay");
overlay.onclick = function () {
window.location.href = "https://www.clarasunwoo.com/search?q=signature+styles&type=product";
};
</script>