html - I want to embed a overflowing video like paralax with no movement. Image bleed -


i started building page i'm trying make simple sectioned banner welcome banner on wix site. here banner @ top of page:wix banner example

it concists of 5 5ths of 20% width section approximately, 2 first 20% , third 60%. managed aling them can't manage set video dimensions third section have autoplay video. no matter resizes video available overflow:hidden; , larger height , width. esampl of code: 

    <div style=" width:20%; overflow: hidden; position:relative; float:left; ">` <img src="https://tatouagecalypso.com/wp-content/uploads/2017/04/photo-image-tatouage-coeur-realiste-couleur-bras-femme-hyper-realisme.jpg" alt="photo d'un image de tatouage d'un coeur réaliste en couleur sur le bras d'une femme en hyper réalisme" title="du coeur à l'ouvrage, tatouage calypso - québec tattoo shop" style="min-width:350px; margin:auto; margin-left:-100px;"></div>  <div style="padding:10px; background-color:#4e7f83; color:#000; float:left; width:20%; height: 480px; margin:auto;"> <h1 style="font-size:185%;">portfolio de tatouage et d'artiste tatoueur</h1> <p>artiste tatoueur en tatouages réalistes, tous uniques et personnalisés. créations de tatouage artistique et diversifié, unique pour chaque client. tatouage à québec. nouveaux tattoo styles et types de tatouages. la variété est ici tout l'art du tattoo contemporain. tatouages pour homme et femme.</p> </div> ------>right here---> <div style="width:60%; position:relative; overflow: hidden; float: right;">     <video  height="480" autoplay>         <source src="https://tatouagecalypso.com/wp-content/uploads/2017/04/machine-a-tatouer-portfolio-banniere-tintamare.mp4" type="video/mp4">     </video> </div>

it places video in right section resizes. want video 480px tall , 60% width match in same row other 2 columns same height 480px. want video margin-left around -250px left , bleed out around doesn't fit. ther issue if size div using % instead of px % cancels out resizing of internal element or something.


Comments

Post a Comment

Popular posts from this blog

Retrieving ETA (estimated time of arrival) with Google Distance Matrix API and public transit as transport mode -

Image
is possible retrieve eta google's distancematrix api (or alternative api). fyi, eta different duration, when using public transport. following example clarify request. when leave on friday @ 8.15 i'll able catch train @ 8.30 , arrive @ 9.00 am. google says duration 30 minutes. however, when leave on saturday @ 8.15 i'll able catch first train @ 9.00 , arrive @ 9.30 am. google still says duration 30 minutes, means ignore delay. google map supports functionality there api around giving me eta instead of duration. can see, distance-matrix' response no good. clarifying question little. eta estimated time of arrival , it's clear user wants know entire duration of transport (including waiting time public transport).
Read more

javascript - Confirm a form & display message if form is valid with JQuery -

i'm developing django application , use javascript in order improve website. i have form , display 2 things : confirm form before submit if form submitted, display message : 'form saved' it's first time i'm using js , need make process. this code : <form class = "form" method='post' action=''> {% csrf_token %} <br></br> {{ form.as_p}} <br></br> <button type="submit">valider</button> </form> <script> $('#form').submit(function() { var c = confirm("click ok continue?"); return c; //you can return c because true or false }); </script> and if form valid , saved : <script type="text/javascript" > $(document).on('valider', 'form.form', function(form) { var $form = $(form); $.ajax({ ...
Read more

ionic framework - Meteor - Error: Failed to execute 'insertBefore' on 'Node' -

i trying make dynamic list display using meteor, idea load more elements each time bottom of page reached. the html template following : <template name="contacts"> {{#contentfor "headertitle"}} <div class="bar bar-header bar-assertive"> <h1 class="title">contacts :</h1> </div> {{/contentfor}} {{#ionview}} {{#ioncontent}} <div class="list"> {{#each contacts}} <a class="item item-avatar" href="/contacts/{{_id}}"> <img src="/img/ico_client.png"> <h2>{{full_name}}</h2> <p>{{company}}</p> </a> {{/each}} </div> {{#if moreresults}} <div id="showmoreresults" style="margin-left: 25px;"> <span class="loading">loading...</span> </div> {{/if}} {{/ioncontent}} {{/ionview}} </te...
Read more