Just use for in order to loop through the object and append the li elements data = { "408": "NameSurname1", "415": "NameSurname2" } for (i in data) { $('ol').append('<li><p>' + i + '</p><p>' + data[i] + '</p></li>'); } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ol></ol> ...
If the height or width of the canvas is 0, the string "data:," is returned. This is most likely the cause for some images to fail to receive a proper dataUrl. Check your img elements and/or scripts to obtain and set the width and height of the canvas. The...
php,html5,encoding,character-encoding
I think your problem might be the encoding of the file. Open it in notepad++ and change the to UTF-8 (without bom).
javascript,html,html5,disabled-input
JavaScript Version: document.getElementById("one").onchange = function () { document.getElementById("two").setAttribute("disabled", "disabled"); if (this.value == 'car') document.getElementById("two").removeAttribute("disabled"); }; <select id="one"> <option value="car">car</option> <option value="truck">truck</option> <option value="moto">moto</option> <option value="none">none</option> </select> <select disabled id="two"> <option...
Load latest version of jQuery: <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> HTML code: <form> <button type="button" class="formLoader">Click button</button> <div id="formContentToLoad"></div> </form> jQuery code: <script type="text/javascript"> $(function(){ $(".formLoader").click(function(){ $("#formContentToLoad").load("scriptToRun.php"); }); }); </script> Whatever markup you need to update in the form, can be put into...
javascript,jquery,html,html5,forms
Keep both the forms hidden at first and give a ID to each <a> and also to the <form> Then $("#id-of-btn1").click(function(){ $("#form-1").toggle(); }); and $("#id-of-btn2").click(function(){ $("#form-2").toggle(); }); EDIT: This could be a solution to make it completely independent of ID/Classes. If you give a class to div containing all the...
jquery,css,html5,internet-explorer,internet-explorer-11
I only get the problem when IE pays attention to the X-UA tag in your header to force IE8 standards. A bunch of JavaScript fails to load and the rest of the page falls over. If I ignore this tag and render with Edge using F12 the page always works...
#content img { width:25%; float:left; } You'll likely want to use a viewport tag (in your HTML head) <meta name="viewport" content="width=device-width, initial-scale=1"> So that you're able to use @media screen and (max-width: 768px) { } and change it to, for example #content img { width:50%; float:left; } when the images...
This should work: @media only screen and (max-width: 600px) { (...) } Note that IE8 and below don't support media queries....
yes it does work, I tried with a bb device (on the same network) using 2 html pages in my localhost.
jquery,html,css,html5,css-tables
Using a library like http://masonry.desandro.com/ See http://jsfiddle.net/tnbqxqpg/1 var elem = document.querySelector('div'); var msnry = new Masonry(elem, { itemSelector: 'table', columnWidth: 200 }); <div> <table border="1"> ... </table> <table border="1"> ... </table> <table border="1"> ... </table> </div> ...
html5,forms,spring-boot,thymeleaf
I believe there could be 2 parts to your question and I will try to answer both. First on the form itself how would you get to a child_id to display fields from another object on the form. Since your Person class does not have a Child relationship you would...
Add the following meta definition inside your head tag: <meta charset="utf-8" /> ...
html,html5,accessibility,semantic-markup
nav is a sectioning element and as such, if you have a heading that describes the navigation it should be inside: <nav> <h1>Navigation</h1> <ul> <li>...</li> </ul> </nav> Otherwise, the heading will be incorrectly associated with a different section altogether, rather than the nav element. The W3C HTML5 spec provides a...
The values are in pairs, each pair is an (x, y) co-ordinate of a polygon vertex. 200, 10 is 200 units away from the origin in the x direction (across) and 10 units in the y direction (down)....
javascript,php,html5,video,codec
Please note that by far very few codecs are supported by browsers. You should have at least 2 versions of each video: ogg and mp4; if you can get webm as well, that'll be a bonus. mkv are not normally supported by any browser, especially ac3 encoding. Now, provided you...
No, definitely don't use Javascript for email sending, as most clients fully disable it. You wouldn't need Javascript at all even if you were designing your table for web browsers only. All your problems can be solved with well applied media queries, if you wanna spend a little time doing...
javascript,php,html,html5,forms
First add an ID to your elements (this makes referencing the elements with JS easier). Ex <input name="cost" type="text"> becomes <input name="cost" ID="cost" type="text"> You need to add a script tag to house the JS code like this <script> var taxPerc = .19; document.getElementById("cost").onblur = function(){ document.getElementById("costplustax").value = parseFloat(document.getElementById("cost").value) *...
javascript,html,ajax,html5,seo
There is only one real SEO issue at stake here: content accessibility. Some search engines don't execute Javascript as part of crawling and indexing. So if your content cannot be accessed with a URL defined in a sitemap without using Javascript, then such content will not be indexed and ranked....
If you are not using any server side languages with your HTML, then it is not possible for you to include another external JavaScript file to your HTML page, unless it is something like PHP, where you do: <?php include "header.inc"; ?> If you are using pure HTML, you need...
My problem is that the result of datetime is [object Text] Well, yes, because you tell JavaScript to do that: timeTag.setAttribute("datetime",document.createTextNode(message.date)); Try timeTag.setAttribute("datetime", message.date); Attribute values are strings, whereas DOM nodes (including text nodes) are objects....
html,css,html5,whitespace,semantic-markup
Set display block on the image for fixing fitting issues. body { max-width: 960px; margin: 0 auto; font-size: 120%; } header, nav { margin: 0; padding: 0; border: 1px solid black; } img.mainpicture { width: 100%; display: block; } <header> <img class="mainpicture" src="//lorempicsum.com/futurama/960/200/2" alt="A picture" /> </header> <nav> Navigation area....
Using SVG You can use animateTransform like in the below snippet. Basically what is being done is that initially the circle elements, cx and cy (center points) are translated in the Y axis (by 100px) and they are slowly animated back into their original position. polyline { stroke: black; stroke-width:...
Just change the name select to someother name like myselect and it should work. You should not have the function name as select This should work for you <?php echo"<td width=14% align=center><input type=button value=Export onclick=myselect() /></td>"; ?> <script> function myselect() { console.log('Clicked'); } </script> ...
css,html5,css3,drop-down-menu,navigation
You have to add a position:absolute to the selector .navigation li ul .navigation{ margin-right: auto; margin-left: auto; width: 100%; background-color: #0f9cde; position: absolute; display: block; margin-bottom: 15px; z-index: 1000; margin-left: -15px; } /*Strip the ul of padding and list styling*/ .navigation ul{ list-style-type: none; margin: 0 auto; padding: 0; position:...
javascript,jquery,html,css,html5
Here's a board for you guys to play with as an example. Also, my stab at the jquery is included as well. Basically, it finds where you clicked, calculated the px distance in float form, and animates the soldier to slide to his new position: var black = '<td style="background-color:black"><div...
Not sure what you mean by a four sided or a two sided box shadow. A box shadow consists of a color, x offset, y offset, blur radius and a spread radius. So box-shadow:red 2px 2px 0px 0px; would only show a red shadow on 2 sides of the element....
html5,css3,border,margin,padding
By default, <code> elements have a display of inline (which is going to generate an element box for every one of the parts separated by <br>). Switching to display: block (code { display: block } in your CSS) or display: inline-block will mean creating just one element box for your...
Heres how i solved my problem finally :) var newLine = new myLine(startX, startY, endX, endY,type); myLines.push(newLine); function myLine(xStart, yStart, xEnd, yEnd,type) { this.xS = xStart; this.yS = yStart; this.xE = xEnd; this.yE = yEnd; this.type=type } And then looped through the array for (i = 0; i < myLines.length;...
One possible solution is that you move all your clearRect()'s out from the else-statements to the top and clear it from the start. Then you add text in a second step. That way you can also group the if-statements together to form a if-else if relationship (crappy explanation, just look...
Try to wrap it as a Control? var uploadProgress = function(uploadObj, event) { // Do somthing about uploadObj } // Target maybe object or string, whatever you want var Uploader = function(target) { var xhr = new XMLHttpRequest(); var handler = uploadProgress.bind(this, target); xhr.upload.addEventListener("progress", handler, false); xhr.open("POST", target, true); xhr.send(f);...
I don't know if this will actually work considering these roles are intended for real tables. Using an actual table would be a much better idea. Anyway, your roles could be improved. Looks like your columnheader context is wrong. The header row should use the row role: <div class="Heading" role="row">...
That's because JSON.parse is able to successfully parse that input, it will parse it as a string and a string is what the return result will be. Check out the documentation and look at the examples. This one specifically: JSON.parse('"foo"'); // "foo" And in regards to achieving your objective, you...
javascript,jquery,html,json,html5
the first "A" in AJAX stands for "Asynchronous" that means, it is not executed right after it has been called. So you never get the value. Maybe you could first, get the os list and then output what you need, like this: function createCheckBoxPlatform(myDatas) { $.ajax({ url: "/QRCNew/GetOS", type: "post",...
javascript,html5,contenteditable
You can set the caret from your mouse position. See Text selection in div(contenteditable) when double click Didn't try it on IE, but this seems to work on Chrome/Firefox: function userDidDrop(event) { event.preventDefault(); if (document.caretRangeFromPoint) { //Chrome range = document.caretRangeFromPoint(event.clientX, event.clientY); } else if (document.caretPositionFromPoint) {//Firefox rangePos = document.caretPositionFromPoint(event.clientX, event.clientY);...
javascript,php,html,html5,loops
To give to each button a different id you can do this way: <?php $i = 1; foreach($queryResult as $res) { ?> // output all table columns <form onsubmit="return javascriptFunction(); " method="post"> <button id="element-<?= $i ?>">edit</button> </form> <?php $i++; } ?> For the second question: if you want to pass...
Yes, use cite, the semantic web can be ours today. Cite becomes more important the more people use it. If everyone used the attribute, developers could make some pretty awesome stuff. Using extra semantics such as these are also good for SEO. Even if Google does not currently look for...
If I understand you correctly, you want the url to be a link but also display as a url. To do this put the url in the a tag twice, like so: This can then be style as desired by the destination page. <style> a { color: blue; text-decoration: underline;...
First off, please notice that DataGroup or data-group is nothing predefined, it's an HTML5 data-* attribute which can be named anything you like. Since you are working with ASP.NET and WebForms, you can use the Attributes collection on your TextBox element like this: boxRequesterName.Attributes.Add("data-group", "1"); See on MSDN WebControl.Attributes and...
Change the order of anchor tags in the html. try <h1>Add a New Subdiv file <a href="/logout" class="LogoutButton"> Logout </a> <a href="/main" class="HomeButton"> <img src="../../../../Pictures/dwelling1.png" height="50"/> </a> </h1> Snippet: .HomeButton { text-decoration: none; float: right; display: inline-block; } .LogoutButton { text-align: center; width: 10%; float: right; background-color: #ffec64; border: 2px...
javascript,jquery,html5,drop-down-menu,autocomplete
The .filter(function) jQuery method can be used to find the target option elements and show them as follows. The JavaScript method .toLowerCase() is used to make the search case-insensitive: $('#filterMultipleSelection').on('input', function() { var val = this.value.toLowerCase(); $('#uniqueCarNames > option').hide() .filter(function() { return this.value.toLowerCase().indexOf( val ) > -1; }) .show(); });...
javascript,json,angularjs,html5
Use ng-repeat-start and ng-repeat-end. For example: <tr ng-repeat-start="user in users"> <td rowspan="{{user.subjects.length+1}}">{{user.id}}</td> </tr> <tr ng-repeat-end ng-repeat="subject in user.subjects"> <td>S{{subject.id}}</td> </tr> Here is a full example: var app = angular.module('MyApp', []); app.controller('MyController', function ($scope) { var users = [{ id: 1, subjects: [{ id: 1, name: "eng" }, { id: 2,...
javascript,jquery,ajax,html5,send
You can "send" the input field value to main.js by passing the input field value as a parameter to a function in main.js. main.js: function mainjsfunction(inputFieldValue) { console.log(inputFieldValue); //do something with input field value } html: <form> <input class="inputField" type="text" required="required" pattern="[a-zA-Z]+" /> <input class="myButton" type="submit" value="Submit" /> </form> <script...
Use calc() but you need to account for borders etc so probably needs to be greater than 20px. .custom-combobox-input { background-color:green !important; margin: 0; background:initial; width: calc(100% - 20px) } ...
Reconsider using AppCache. Using it doesn't necessarily imply that your site will work offline. Basically, here are the steps that AppCache takes, regardless of the browser connection status: Asks the server for the manifest file. If the manifest file hasn't changed, it serves the local files. If the manifest file...
Use the following to style the base: input[type=range] { -webkit-appearance: none; /* Hides the slider so that custom slider can be made */ width: 100%; /* Specific width is required for Firefox. */ } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; } input[type=range]:focus { outline: none; /* Removes the blue border. You should...
javascript,jquery,html,html5,validation
but what if the user has js turned off? The same could be said for HTML5 - what if the user is using a browser which doesn't support that? If you're wanting to process data on the server-side you should always perform server-side validation. Front-end validation is primarily used...
javascript,css,html5,google-maps,google-maps-markers
Please note as per the stacking order of the CSS -first the context is printed -then the element with position and negative z-index are printed -then element without position are printed -after that the element with 0 or auto z-index are printed -the all element with postive z-index and position...
javascript,jquery,html,html5,browser
You're not the first to have this problem, thankfully. There's a lot of difficult solutions around this problem, including using a module loader as suggested in the comment (which I agree is the best long term solution, because they account for more browsers and flexibility, but it's a lot to...
So the reason why the hole part is clickable is, because the X is part of the whole LI-Tag and you have no access to the :before and :after pseudo-element. You can use following technique: Access the css ":after" selector with jQuery Or you can just put another element in...
javascript,jquery,html,css,html5
You need to reference the actual input element, not the containing element. This will find the input element if it is hidden using type="hidden", using css or using jQuery's hide() var global_id = $("td:first input:hidden:first", this).val(); console.log("value=" + global_id); ...
javascript,jquery,css,html5,twitter-bootstrap
Updated. Yes - the first pure CSS solution was not satisfactory. If you dare to add some javascript, you can do this : $('.accordion-group').on('show', function() { $(this).find('.accordion-toggle').removeClass('arrow-down').addClass('arrow-up'); }); $('.accordion-group').on('hide', function() { $(this).find('.accordion-toggle').removeClass('arrow-up').addClass('arrow-down'); }); It is using the bootstrap collapse hide / show events directly on the collapse sections. Still without...
.my-size { width:264px; height:264px; border:solid 1px #e1e1e1; } .full-bg { background: url(https://drscdn.500px.org/photo/97054699/m=2048_k=1_a=1/5bd4a9ac205fef91437ee596edda9362) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } <div class='my-size full-bg'></div> Why not just set the image as the background and use background-size:cover to fill the space like the example here or below...
Did you tried using jQuery parents(): $(".change").click(function(e){ e.preventDefault(); var qty = $(this).parents().eq(1).find('input').val(); var href = $(this).attr('href'); alert (qty); }); jsfiddle...
javascript,jquery,html,css,html5
Check out this jsfiddle for a simple example https://jsfiddle.net/traso7o7/ position: absolute; is main thing you need to put your message on the top...
Why can't we just use the HTML5 required? <input type="date" name="date" required> ...
android,iphone,html5,windows-phone-8,input
When retrieving the value with jquery it is returned with a . decimal separator. Try this: <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <input type="number" name="myNum" id="myNum"> <button id="submit">Submit</button> <hr/> <code></code> <script> $("#submit").on("click",function() { var numericValue = $("#myNum").val();...
As far as I see you have this style .wrapper { border: 1px solid white; } Try to remove the border style. It should help you....
javascript,html5,fonts,filereader
Short answer: yes. Longer answer: yes, but you want to re-serve it with the real mime type, not "octet stream" mime type. It'll probably still work, but the browser will complain that the resource had the wrong mime type, and if the site you serve it on uses CSP (which...
You need to multiply earning per unit (($product['sellingprice'] - $product['cost'])) by the amount of stock ($product['stock']): <?php echo number_format(($product['sellingprice'] - $product['cost']) * $product['stock'],0,',','.'); ?> ...
javascript,html5,canvas,drawimage
In your function function loadImg() { var loadTile = new Image(); loadTile.src = 'Top/x+y+/' + tileToLoad + ".png"; loadTile.onload = function() { ctx.drawImage(loadTile, tileToLoadX, tileToLoadY); }; console.log("Successfully loaded tile " + tileToLoad); }; The variables tileToLoad, tileToLoadX and tileToLoadY belong to the function imageSearch() as local variables and would be...
<blockquote> doesn't demand a cite, it's optional. Don't overthink it. <blockquote> without cite is what you're looking for.
The short answer is that webgl/opengl is not meant for drawing a SINGLE quad at a time. GPUs are designed to be massively parallel and thus to gain the most out of webgl you have to draw in batches. You should be comparing drawing 10k images in canvas versus drawing...
javascript,html5,google-maps-api-3,marker
Insert a button for refresh and solve the problem..
javascript,html5,local-storage
From the spec for clear: The clear() method must atomically cause the list associated with the object to be emptied of all key/value pairs, if there are any. If there are none, then the method must do nothing. In the above, "the object" in this context would be localStorage. What...
Responsive SVG solution or classic image map After taking Paulie_D's comment about SVG into account, I wrote an alternative using SVG to the classic image map. Both work fine, but the SVG version clearly wins when it comes to responsiveness. Both versions have a connection between the anchors and the...
The pattern attribute has to match the entire string. Assertions check for a match, but do not count towards the total match length. Changing the second assertion to \w+ will make the pattern match the entire string. You can also skip the implied ^, leaving you with just: <input pattern="(?!34)\w+"...
FabricJS does not have a native API hook to lock an object to follow along a diagonal line. You will have to listen for the object's :moving events and then manually reset its x & y position to keep it on the line. Here's a function that reports which [x,y]...
CSS gives you a lot of different metrics for sizing things. The most obvious way to scale relative to an existing size (such as the size of the body itself) is through percentages. Your left column is going to be about 33% width, and your right column should be left...
javascript,jquery,angularjs,html5
https://github.com/2fdevs/videogular creating your own custom directive can does the job for you (Preferred and reusable), The simplest way is using angular.element and selecting the required video element from the DOM using its functionalities. <video autoplay="autoplay" preload="auto" ng-click="pauseOrPlay()"> <source src="{{url }}" type="video/mp4" /> </video> //controller function myCtrl($scope) { $scope.url =...
javascript,android,html5,spring,spring-mvc
Since you're not actually developing a mobile app (which would be installed on the mobile device itself) but a web page that detects and supports mobile devices, you don't need an Android emulator. What you do need is a browser that allows emulating a mobile client - Chrome has a...
html,css,html5,google-chrome,website
I think you are asking about Parallax. Explore a bit on Parallax in Wiki and see some samples here...
javascript,php,jquery,html,html5
here is a link to a jsfiddle if you would like to play with it yourself Using javascript and html only. This will update the textbox with the value selected onchange. By setting the 'onchange' attribute on the select tag, you register the 'updateInput()' function as a listener to the...
You just need to use .val() method. No need to use loop. $(".contacts").val(selected_values); DEMO...
javascript,jquery,html,css,html5
Use float: right on divs: HTML <div id="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> </div> CSS #container div { float: right; width: 100px; background: yellow; margin: 10px; } Demo...
The suggested swap does work. You had some errors in your css. You need to remove the period "." before nav and #date in your css. .swapHack{ display:table; width: 100%; } #date { display: table-header-group; } nav { display: table-footer-group; } <div class="swapHack>" <header> <div id="logo"> <img src="images/logo.png" title="Site Name"...
If you are using them as meta-documents and they are sent to the parser, then converted as HTML and as long as the converted HTMLs do not have any irrelevant tags, it is fine! So, if the following code: <requirement> THE REQUIREMENT HERE </requirement> Gets converted into something like: <!--...
javascript,html,angularjs,html5
Actually there is a feature request for this https://github.com/angular/angular.js/issues/9849 For getting validators you can use $error object, for example for minlength it will be something like form.$error.minlength[0].$name. But, there is no way to get exact value of this validator yet. See this issue: https://github.com/angular/angular.js/issues/11671. You need to implement ngModel directive...
html,css,html5,twitter-bootstrap,bootstrap
I'm not 100% sure I understand your question but, if you want the dropdown to toggle when you tab onto it, you can do the following using javascript, $('.dropdown-toggle').keyup(function(e) { if (e.keyCode == 9) { $(this).dropdown('toggle'); } }); Here's an example, http://jsfiddle.net/p73vc8Lv/3/...
javascript,html5,google-maps,gps,geolocation
setInterval(function, delay) or (function(){ // do some stuff setTimeout(arguments.callee, 60000); })(); The second aproach guarantees, that the next call is not made before your code was executed. The final code will depends on the choosen aproach. could be var map; var geocoder; var delay = 1000; function initialize() { var...
html5,css3,twitter-bootstrap-3
Your tabs breakdown after the width is within 767px, so you can use the below CSS hack. @media (max-width: 767px) { .nav-tabs.nav-justified > li { float: left; width: 50%; } } Bootply...
javascript,jquery,html,css,html5
Use vh: iewport-percentage lengths defined a length relatively to the size of viewport, that is the visible portion of the document. Only Gecko-based browsers are updating the viewport values dynamically, when the size of the viewport is modified (by modifying the size of the window on a desktop computer or...
1) Determine which dimension is the one which exceeds the size of the window you want to put the image in. If both exceed the size calculate both factors and use the largest: width_factor = imagewidth / allowable_width height_factor = imageheight / allowable_height 2) Scale both the height and the...
Yes, any HTML can be modified with a basic page inspector. You'll need to include server-side validation to make sure they're not messing with your page.
The problem is that div.topbar Should be div.topBar Because <div class="topBar"> is not <div class="topbar"> It is still being rendered in quirks mode for some reason but html5 mode wont render it. (Demo)...
javascript,html,html5,javascript-events,html-select
If you’re interested in the deleted element and its properties, one way is to set a MutationObserver to track modifications to the DOM. Its callback provides changes and affected elements and other userful information. (new MutationObserver(function(mutations){ mutations.forEach(function(mutation){ if(mutation.type=='attributes') console.log('Element attributes may have changed, see record:',mutation); else if(mutation.type=='childList') console.log('Child nodes were...
Kinda crazy but you could do it like so: var htmlContents = document.documentElement.innerHTML; localStorage.setItem('myBook', JSON.stringify(htmlContents )); From there you can call it up whenever you like.. localStorage.getItem('myBook'); It would be better of course to get the actually book contents of course instead of the entire page! Also as for what...
html5,for-loop,navigation,jekyll,liquid
You're comparing two counter that are not working the same way. {% assign imgIndex = {{forloop.index0}} This will count from 0 to array.size-1 {% assign naviIndex = {{forloop.index}} This will count from 1 to array.size As your not in the same "time zone", for the first image you have imgIndex...
As it is fixed it will not react to the parent div. So to fix it make the wrapper fixed instead that way you can center it and your content will adjust around the parent i.e wrapper. I made a new wrapper inside of your wrapper and called it navWrapper;...
javascript,html5,audio,javascript-events
I've got it to work. <!DOCTYPE html> <html> <body> <script> var count=0; </script> <p>Press play and wait for the audio to end.</p> <audio id="myAudio" onended='IncrementCount()' controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> <audio id="myAudio2" controls onended='IncrementCount()'> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3"...
Including the pushState option when starting Backbone.history tells Backbone to use the HTML5 history API. Basically, this API lets you change the URL in the address bar without reloading the page (see more about it here). Without pushState, Backbone will use hashes (#) to change the URL, so it doesn't...
javascript,jquery,html,html5,forms
You may find it easier to identify the issues you are having if you separate out each part of the process. If you store all of the elements you are going to be using at the beginning you will make your calculations easier to read plus avoid unnecessary DOM calls....
I used this as an example and modified your css. Example 1: Video as background of containing div In this example the video only plays as the background of the containing div, similar to lumosity.com: JSFIDDLE 1 #banner { position: relative; height:300px; width:100%; overflow: hidden; } #videobcg { position: absolute;...