Add a link to vimeo video on Shopify

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>

Here is some ideas for you try https://stackoverflow.com/questions/11056901/how-to-add-an-a-href-link-to-a-div — Justin Morrison, Sep 20 '21 at 14:45

Dan Zuzevich · Answer 1 · 2021-09-20T15:11:52.867

0

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>

edited Sep 20 '21 at 15:11

answered Sep 20 '21 at 15:04

Dan Zuzevich

3,651
3
26
39

Hopefully I was not misunderstanding the question. – Dan Zuzevich Sep 20 '21 at 15:05
I updated the styles for the overlay, I forgot to add them the first time. – Dan Zuzevich Sep 20 '21 at 15:12
1

Thank you! Would I just replace my previous code with these new lines? I honestly HATE shopify liquid.. I am used to just JavaScript/HTML/CSS lol – Carly DiPasquale Sep 20 '21 at 20:37
I get the error: Refused to display 'https://vimeo.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'. in my console – Carly DiPasquale Sep 20 '21 at 20:43
Yeah, I was having trouble with getting the iframe to load, same problem. I'm not sure why it's doing that. – Dan Zuzevich Sep 20 '21 at 20:45
Womp womp.. This issue is driving me crazy. Essentially all I want is to redirect the user to a page when the video is clicked (whether it be the actual video container or words overlaid on top of the video). I will keep trying – Carly DiPasquale Sep 20 '21 at 20:54
Try using this link instead `https://player.vimeo.com/video/540236561` in your src attribute. – Dan Zuzevich Sep 20 '21 at 22:21
Unfortunately it still is not making the video "clickable" to direct to a new page – Carly DiPasquale Sep 21 '21 at 17:38

Add a link to vimeo video on Shopify

1 Answers1