Search code examples
vimeovimeo-apivimeo-player

How to hide Vimeo controls bar using CSS

I'm trying to deactivate the minute bar on an iframe where a link to a vimeo video is inserted.
This is the CSS I put, but it doesnt work. If I change it in the browser console then it works.

  <iframe src="https://player.vimeo.com/video/4766864944" width="640" height="480" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" data-ready="true"></iframe>

CSS
.player .vp-controls .play-bar {

 display: none;
 }
Solution

  • You can not do it with CSS but you can pass right query parameter to src prop. In your case it will be controls=0

      <iframe src="https://player.vimeo.com/video/4766864944?controls=0" width="640" height="480" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" data-ready="true"></iframe>

    For more information you can check this link