javascript - Adding Text overlay to my Vimeo Full Screen Background -iframe- -


currently working on full video background setup. newbie question. want add text on video. did search on here tutorials , tried few things not work.

code:

<div class="video"><iframe allowfullscreen="" frameborder="0" height="540"            mozallowfullscreen="" src="//player.vimeo.com/video/99315264? title=0&amp;byline=0&amp;portrait=0&amp;color=3a6774&amp;autoplay=1&amp;loop=1" webkitallowfullscreen="" width="960"></iframe>       <style type="text/css">body {     margin: 0;     padding: 0;      }     .video {     position: absolute;     left: 0;     top: 0;     width: 100%;     height: 100%}        .video iframe {     position: absolute;     z-index: 1;     width: 100%;     height: 100%;     }      .video .overlay {     position: absolute;     z-index: 2;     left: 0;     top: 0;     width: 100%;     height: 100%;     background: rgba(0, 0, 0, 0.0);     }     </style> 

the code working perfect wanted add text overlay. have been reading tutorials cannot seem find right fit. easy question sure. thank help.

also when using format

example:

 <video autoplay loop>  <source src=”loop.mp4” type=”video/mp4”>  <source src=”loop.webm” type=”video/webm”>  <source src=”loop.ogv” type=”video/ogg”>  </video>  

the vimeo video did no load correctly- 404 error- used iframe setup instead-- seems trick. using vimeo video because have paid account allows me customize video settings , play in full hd.

thanks again.

my video http://lmdesigns.x10host.com/designtest.html

you have set div absolute, , there position inside of container div higher z-index video element.

.text-div {     text-align: center;     position: absolute;     height: 97px;     width: 80%;     z-index: 3;      margin-left: 10%;     margin-right: 10%;     border: 3px solid #fff; } 

Comments

Popular posts from this blog

javascript - RequestAnimationFrame not working when exiting fullscreen switching space on Safari -

Python ctypes access violation with const pointer arguments -