html - Video as background with overlayed elements -


goal: add video background using html , css only.

the idea here have video running in loop doesn't allow interaction user background.

in front of video want elements. text...

the issue code: seems working intended 1 thing: video in front of else. how put behind other elements?

html:

<div id="home" class="home3">       <video style="width: 100%" src="video/bg_video.mov" autoplay="true" loop="true" muted="true">         <div class="home-text-wrapper">           <div class="sixteen columns">                        <div class="home-logo-text">               <a href="#about">hevar</a>             </div>           </div>                <a href="#about">                   <div class="container clearfix">                 <div class="home-quote">                   <h1>                     <span class="slabtext">some text</span>                     <span class="slabtext">some text</span>                     <span class="slabtext second-child"> text</span>                           <span class="slabtext">some text</span>                   </h1>                 </div>               </div>             </a>            </div>         </video>       </div>

css:

#home { position: relative; overflow: hidden; height: 100%; width: 100%; display: table; color: #010101; z-index:10;  .home3 .home-text-wrapper .container { width: 350px; height: 350px; border-radius: 50%; background: rgba(0, 0, 0, 0.61); text-align: center; -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.3s ease; -o-transition: 0.3s ease; transition: 0.3s ease; box-shadow: 0px 0px 0px 10px rgba(255, 255, 255, 0.24); overflow: hidden; }  .home3 .home-text-wrapper .container.no-safari { -webkit-backface-visibility: hidden; backface-visibility: hidden; } .home3 .home-quote { -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; -ms-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; display: table-cell; vertical-align: middle; height: inherit; text-align: center; width: inherit; overflow: hidden; color: white; } .home3 .slabtextdone { color: #ffffff; } .home3 .slabtextdone .slabtext.second-child { display: inline-block; width: auto; color: steelblue; text-shadow: none; overflow: hidden; } .home3 .home-text-wrapper .container:hover { -webkit-transform: scale(1.09); -moz-transform: scale(1.09); -o-transform: scale(1.09); -ms-transform: scale(1.09); transform: scale(1.09); box-shadow: 0px 0px 0px 15px rgba(255, 255, 255, 0.24); -webkit-transform-style: preserve-3d; overflow: hidden; } .home3#home h1 { font-size: 30px; overflow: hidden; margin: 0 50px; } 

video{   position: fixed;   min-width: 100%;   min-height: 100%;   z-index: -100;   left: 0;   bottom: 0; }

and fix html:

<video></video> rest code <div></div>

Comments

Post a Comment

Popular posts from this blog

shopping cart - Page redirect not working PHP -

im trying redirect user when click "empty cart". redirect working "add cart" not "empty cart". ideas great. in main .php file set current url seen $current_url = base64_encode("http://$_server[http_host]$_server[request_uri]"); then below cartaction.php file handles actions such "add cart" , "empty cart" <?php session_start(); include_once 'config.php'; //add item in shopping cart if(isset($_post["add"])) { $product_id = $_post["product_id"]; //product id $return_url = base64_decode($_post["return_url"]); //return url $qty = $_post["qty"]; $product = $mysqli->query("select product_name, unit_price, unit_quantity products product_id = '$product_id'"); $obj = $product->fetch_object(); if(!isset($_session['products'])) { $_session['products'] = array(); } if(array_key_exists($product_id...
Read more

php - How to modify a menu to show sub-menus -

i have custom php menu made person, displays categories menu. however, need display subcategories well. tried adding hierarchical parameter didn't work. hoping assistance! here code: <ul> <?php /* categories wp e-commerce products */ $wpec_product_categories = get_terms( 'wpsc_product_category', 'hide_empty=0&parent=0&exclude=298'); $myarray = array(); foreach($wpec_product_categories $wpec_categories){ $myarray[$wpec_categories->term_id]['name'] = $wpec_categories->name; $myarray[$wpec_categories->term_id]['slug'] = $wpec_categories->slug; $myarray[$wpec_categories->term_id]['term_id'] = $wpec_categories->term_id; } foreach($myarray $wpec_categories1){ $wpec_term_name = $wpec_categories1['name']; $wpec_term_slug = $wpec_categories1['slug']; $wpec_term_id = $wpec_categories1['term_id']; echo '<li> <a href="'.get_page_link(19)....
Read more

python - Installing PyDev in eclipse is failed -

unable read repository @ http://pydev.sf.net/updates/content.xml. sun.security.validator.validatorexception: pkix path building failed: sun.security.provider.certpath.suncertpathbuilderexception: unable find valid certification path requested target i installing pydev in eclipse using python, doesn't install successfully. gives above error. happened? how solve error? i had error when trying install on laptop behind corporate firewall. couldn't tell setup of firewall, not sure of root cause. i got passed error installing pydev eclipse when out behind firewall. another way got around have eclipse on non-firewalled machine, install pydev eclipse, , copy whole eclipse directory non-firewalled machine firewalled machine. there better way, , way fix properly, didn't have time work out firewall doing. this on windows 7 machine (yeah know) not work *nix versions installed through package manager yum or apt.
Read more