html - html5 hero video will not centre when the viewport is moved in from the right -


i in process of creating website , want video background scrolls. have far: www.sawvisuals.com/video1.html

the website is/will responsive , intend have video on desktop version. have static image tablets , phones.

my problem when viewport moved in right video not stay centred. want stay centred @ time, great.

all code far follows:

html

<div class="gridcontainer">   <div id="wraper">  <video autoplay loop muted poster="images/bg-image.jpg" class="bgvideo"          id="bgvideo"> <source src="videos/clouds.mp4" type="video/mp4"> <source src="videos/clouds.webm" type="video/webm"> </video>  </div>  <div class="spacer">  <div class="desktop-header"> <div class="desktop-logo">logo here</div> <div class="desktop-links">link1 link2 link3 link4 link5</div> </div>   </div>  <div class="info">       <h6> creative solutions print, <br>web & visualisation </h6> </div>  <div class="text">lorem ipsum dolor sit amet. lorem ipsum dolor sit amet. lorem ipsum dolor sit amet. lorem ipsum dolor sit amet. lorem ipsum dolor sit amet. lorem ipsum dolor sit amet. lorem ipsum dolor sit amet. lorem ipsum dolor sit amet. lorem ipsum dolor sit amet. lorem ipsum dolor sit amet. lorem ipsum dolor sit amet. lorem ipsum dolor sit amet. lorem ipsum dolor sit amet. lorem ipsum dolor sit amet. lorem ipsum dolor sit amet. lorem ipsum dolor sit amet. lorem ipsum dolor sit amet. lorem ipsum dolor sit amet. lorem ipsum dolor sit amet. lorem ipsum dolor sit amet. lorem ipsum dolor sit amet. lorem ipsum dolor sit amet. lorem ipsum dolor sit amet. </div>   </div>

css

.gridcontainer {     width: 100%;     max-width: 1920px;     padding-left: 0%;     padding-right: 0%;     margin: auto; } .bgvideo {     display: block;     position: absolute;     min-width: 100%;     min-height: 100%;     width: auto;     height: auto;     z-index: -9999; } .spacer {     display: block;     width: 100%;     height: 100vh; } .text {     width: 90%;     padding-left: 5%;     padding-right: 5%;     padding-top: 200px;     padding-bottom: 200px;     background-color: #9ff; } .info {     position: absolute;     top: 50%;     text-align: center;     margin-left: 5%;     margin-right: 5%;     width: 90%;     font-size: 36px;     color: #fff;     -ms-transform: translate(0,-50%); /* ie 9 */     -webkit-transform: translate(0,-50%); /* safari */     transform: translate(0,-50%); } .desktop-header {     display: table;     width: 90%;     padding-left: 5%;     padding-right: 5%;     padding-top: 4%;     background-color: #fff; } .desktop-logo {     float: left;     width: 12%; } .desktop-links {     width: 88%;     float: left;     clear: none;     text-align: right; }

any in centering video going massively appreciate.

try using around divisions of video bg want. center it

<center>    <div>      <!--put code here of item want center-->      </div>    </center>


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