I was browsing the HP-India website and noticed they have a cool autoplay video in the background of a section below the header. I would love to recreate something similar on my own website. Any tips on how to achieve this?
I was browsing the HP-India website and noticed they have a cool autoplay video in the background of a section below the header. I would love to recreate something similar on my own website. Any tips on how to achieve this?
Utilizing media queries for a responsive design approach, I took the source video files in webm and mp4 format without using any code from this site. My CSS skills were put to use, although there may be room for improvement as I am not a designer...
div.content, div.top, div.footer{
float:left;
position: relative;
top:0px;
left:0px;
z-index:1000;
width:100%;
border-radius:2px;
}
.top{
background-color:red;
margin-bottom:20px;
}
.content{
background-color:green;
min-height:600px;
height:60%;
opacity:0.5;
}
.footer{
background-color:yellow;
}
@media all and (max-width: 1080px) {
.video-background video{ left:-600px;}
}
@media all and (max-width: 980px) {
.video-background video{ left:-300px;}
}
@media all and (max-width: 800px) {
.video-background video{ left:-300px;}
}
@media all and (max-width: 768px) {
.video-background video{ left:-300px;}
}
@media all and (max-width: 750px) {
.video-background video{ left:-380px;}
}
@media all and (max-width: 640px) {
.video-background video{ left:-280px;}
}
@media all and (max-width: 360px) {
.video-background video{ left:-180px;}
}
@media all and (max-width: 320px) {
.video-background video{ left:-160px;}
}
.video-background video{position: fixed;top:0px;min-width: 100%;min-height: 100%;}
.video-background{min-width:100%;min-height:100%;height:100%;width:100%;position:fixed;top:0px;}<div class="top">HEADER</div>
<div class="video-background">
<video controls="" controlslist="nodownload" style="position:fixed;z-index:-1;" poster="http://www.remmache.fr/sites/default/files/background_video/douceur.jpg" autoplay="" loop="" muted="" playsinline=""><source src="http://storage.media.ext.hp.com/sprocket/sprocket_oct.webm" type="video/webm" onerror="fallback(parentNode)"><source src="http://storage.media.ext.hp.com/sprocket/sprocket_oct.mp4" type="video/mp4"><source src="http://www.remmache.fr/sites/default/files/background_video/Coloring.ogv" type="video/ogg"></video></div>
<div class="content">i am the content .... </div>
<div class="footer">footer</div>In my code, I have combined 3 separate ajax calls in one function along with checkAjaxCompletion method to monitor each ajax completion flag. The current approach involves sending multiple independent ajax calls and using an interval method to continuousl ...
I'm seeking advice on the best source for assistance with CanvasXpress. I haven't found any relevant threads in the forum yet. Currently, I'm using CanvasXpress to showcase dynamic data and I know that it accepts json objects. My issue arise ...
When moving a string from view to controller, I have encountered an issue. Below is the ajax code I am using: var formData = $('#spec-wip-form, #platingspec-form').serializeArray(); var platingId = @Model.PlatingId; var form = JSON.s ...
Is it possible to retrieve an element through XPath after using the .click() method when that element is located within a section of JavaScript known as BODY_BLOCK_JQUERY_REFLOW and appears only after the click action? I am attempting to access this speci ...
Is this code 100% secure against XSS attacks? If not, could you provide an example of a malicious string that could make it vulnerable? <html> <body> <script> <?php $bad = "malicious string. Please provide exampl ...
My form includes a list of 6 options where users can only select one. After submitting the form, I want to redirect them to a specific page based on their selection. For example, I have the following 3 options: Facebook Youtube Twitter If a user selects ...
In my current project, I have integrated pagination using the vue-paginate node. Additionally, I have also implemented filtering functionality using vue-pagination, which is working seamlessly. Everything works as expected when I enter a search term that d ...
I have a json file containing links to all the images in a specific folder, as shown below: ["http://img1.png","http://img2.png","http://img3.png","http://img4.png"] I would like to create a <ul> list using this data, but I'm not sure how to d ...
How can I call all the data in "md" and display it in a table? I've tried multiple values but none seem to work. Can someone guide me on how to use the "md" value to display in a table? <script src="https://ajax.googleapis.com/ajax/libs/jquery/ ...
Looking to personalize the HTML5 input type="date" element by integrating a separate button that triggers the visibility of the date picker dropdown. Struggling to find any information on this customization. Any assistance would be greatly valued! ...
It seems to be a common need for people to have a feature where selecting a country would then filter down the provinces or states available for that country, and then from there, narrow down to city selections. I've been searching NPM for a solution, ...
While similar questions have been asked before, I am still unable to find a solution to my specific issue. I have a functional code in jsFiddle that creates a table and allows you to select a row to color it red. Everything works perfectly fine in jsFiddle ...
Recently, after reading a discussion on stackoverflow, I decided to incorporate labels into my canvas. To achieve this, I created a second scene and camera to overlay the labels on top of the first scene. this.sceneOrtho = new THREE.Scene();//for labels t ...
I am exploring the idea of dynamically loading HTML content, such as updating a Bootstrap modal dialog's contents using AJAX calls instead of refreshing the entire page. However, before I proceed, I want to understand the potential risks involved and ...
div(ng-controller="dashController") nav.navbar.navbar-expand-sm.navbar-dark.fixed-top .container img(src='../images/Dashboard.png', alt='logo', width='180px') ul.navbar-nav li.nav-item ...
My code includes a string like \uC88B\uC544\uC694. When I use this string in a node repl (v7.4.0), it displays '좋아요' correctly. However, when I try to use the same string in the following code snippet, it does not work as ex ...
I've searched through various questions and answers but haven't been able to resolve this issue. There's a modal on my page that is causing the content to shift slightly to the left. I've created a sample fiddle, although it doesn&apo ...
Hello everyone, I'm new to this forum and seeking some assistance. I have a requirement where multiple div contents need to fade in and out dynamically. I found this jsfiddle example that works for 2 divs, but I want it to work for more, say 5 differ ...
Is there a way to repeat a background image to fit its content? I have a background image that needs to be repeated in this manner: https://i.sstatic.net/qVKkp.png However, when using the following code: .imgbord { background: url('https://i.imgur ...
My attempt to configure Typescript to exclude specific files during compilation is not working as expected. Despite setting exclusions in my tsconfig.json file, the code from one of the excluded files (subClassA.ts) is still being included in the compiled ...