Tell me how to place a picture in the player?

iframe { border: none; border-radius: 10px; } 
 <iframe class="subscribe-video" src="https://player.vimeo.com/video/14352658?title=0&byline=0&portrait=0" width="500" height="305"> </iframe>

jsfiddle

  • one
    You can place a picture on top of the player - L. Vadim

1 answer 1

https://jsfiddle.net/4qeg98ja/

css

 iframe{ border: none; border-radius: 10px; } img{ border: none; border-radius: 10px; } .img-vm { position:absolute; top:0px; }

html

 <iframe class="subscribe-video" src="https://player.vimeo.com/video/14352658?title=0&byline=0&portrait=0" width="500" height="305"> </iframe> <div class="img-vm"> <img height="305" width="500" src="https://community.mypaint.org/uploads/default/optimized/1X/4699061a23256d40fa5081c23b7dc2ae03643605_1_690x481.jpg"> </div>
  • Player controls should be visible - A. Gr
  • one
    You can simply make the picture smaller in height, but the problem is that when they press the play, the picture will interfere. You can remove the top layer of the picture when the mouse will be on it. - L. Vadim
  • It is necessary that the picture was under the controls. If in this case there is no possibility to insert it, there may be a way to connect the video to allow it. For example, as a video tag with the poster attribute, but a Vimeo player is required. - A. Gr
  • one
    vimeo.com/blog/post/turn-any-video-frame-into-a-thumbnail - L. Vadim