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&byline=0&portrait=0&color=3a6774&autoplay=1&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.
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
Post a Comment