CODEWITHSUNDEEP
htmlcssvimeo-player
alexkodr
alexkodr

Reputation: 543

Vimeo iframe embed wrapped in a link - Link not working

I have a responsive embedded Vimeo video wrapped in a link. But the link doesn't work or show cursor on hover. Any ideas why?

.container {
  position: relative;
  margin-bottom: 20px;
  max-width: 1000px;
}

.container a{
  display: block;
  cursor: pointer;
}

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.embed-container iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
<script src='https://player.vimeo.com/api/player.js' id='vimeo-js'></script>
<div class="container">
  <a href="https://www.google.com/">
    <div class="embed-container">
      <div id="home-feat-player-item1" data-vimeo-initialized="true">
        <iframe src="https://player.vimeo.com/video/622416001?h=1e51090569&amp;title=0&amp;byline=0&amp;muted=1&amp;controls=0&amp;app_id=122963" width="640" height="360"></iframe>
       </div>
    </div>
  </a>
</div>

What am i missing here?

Upvotes: 0

Views: 1813

Answers (1)

iose
iose

Reputation: 47

I don't understand the problem however by setting the code like this, it works.

<div style="padding:75% 0 0 0;position:relative;">
<iframe src="https://player.vimeo.com/video/622416001?h=1e51090569&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=122963" 
frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen 
style="position:absolute;top:0;left:0;width:100%;height:100%;" >
</iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>

Upvotes: 1

Related Questions