Search code examples
htmliframeembedembedded-resourcevimeo

Can I add words/image over an embedded Vimeo iframe? How?

As title... Can I even do that? If so, how to? I've embedded a Vimeo video but failed to add words on it. Javascript is able to use Many thanks

Solution

  • A solution with a text with an absolute position:

    #video-container{
  position:relative;
  width:auto;
}

#foreground-text{
  position:absolute;
  top:50%;width:100%;text-align:center;
  margin:0 auto;
  
  color: white;font: bold 20px;

}
    <div id="video-container">
  <iframe src="https://player.vimeo.com/video/36477715" width="100%" height="300"  frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="https://vimeo.com/36477715">Things Programmers Also Know</a> from <a href="https://vimeo.com/bluekeyes">Billy Keyes</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
  <span id="foreground-text">Some text</span>
  
</div>
    (video won't work in the snippet frame)

    You can also use WebVTT subtitles: