javascript - How do I add text on a video like PayPal's? -

javascript - How do I add text on a video like PayPal's? -

in paypal have tagline "you create it, we'll pay" on top of video little play button near @ corner. when click on play button video start playing causing dark overlay 1 time layered video when wasn't in play, smoothly vanish tagline still there. how done? can provide examples please, think effect pretty neat.

thanks!

demo

here illustration show total screen video <video> tag using css fullscreen stuff , farther required text on over image using position: absolute

css

.videoinsert { position: absolute; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; background-size: cover; overflow: hidden; } h2 span { color: white; font: bold 24px/45px helvetica, sans-serif; letter-spacing: -1px; background: rgb(0, 0, 0); /* fallback color */ background: rgba(0, 0, 0, 0.7); padding: 10px; z-index: 999999999999; position: absolute; margin:auto; left:0; right:0; top:0; bottom:0; height: 100px; width: 80%; text-align: center; }

html

<div class="wrapper"> <video class="videoinsert"> <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg">your browser not back upwards video tag. </video> </div> <h2><span>a nice office video:<br />yes is!</span></h2>

javascript html css video paypal