creating a stunning video background that spans 200 viewport heights

My goal is to incorporate a background video for VH1 and VH2 that remains fixed but stops at VH3. When a user opens the page, they will see #VH1 and the #videoBG as a background video. As they continue scrolling, they will reach #VH2 without the background video changing (it stays fixed). However, once they scroll down to #VH3, a different background image will appear.

<video playsinline autoplay muted loop id="videoBG">
    <source src="bg.mp4" type="video/mp4">
</video>

<div class="vh" id="vh1">
    text 1
</div>

<div class="vh" id="vh2">
    text 2
</div>


<div class="vh" id="vh3">
    text 3
</div>

<style>
.vh {
    width: 100vw;
    height: 100vh;
}

#vh3 {
    background: url(IMG/bg1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
</style>
htmlcss

Answer №1

Adjust the video to have a fixed position, with a width of 100vw and height of 100vh as you mentioned. However, there seems to be an issue where it stops at vh3 which might be related to React?

* {
      margin:0;
      padding:0;
}
.vh {
  width:100vw;
  height:100vh;
}
  /*apply this styling to the video element*/
.video {
  position:fixed;
  z-index:99999;
  width:100vw;
  height:100vh;
  /*ignore the following styles*/
  color:white;
  display:flex;
  justify-content:center;
  align-items:center;
  /*ignore the following styles*/
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhance your website design with Bootstrap's unique styling for jumbotron elements

I am currently working on developing a mobile website for calendar events and I need some help. Here is the basic version of the site that I have created so far: The issue I am facing is that the purple backgrounded areas only cover the text, rather than ...

csstwitter-bootstraptwitter-bootstrap-3

issue with transparent html5

Here is the code snippet I am struggling with: function clear(){ context2D.clearRect(0, 0, canvas.width, canvas.height); } function drawCharacterRight(){ clear(); context2D.setTransform(1, 0.30, 1, -0.30, 10, 380);//having issues here c ...

javascripthtmlcanvas

Customize div styles according to the website domain

I want to dynamically change the header of my website based on whether it is in dev QA or production environment. Below is the HTML code: <div id="wrapper"> <form id="form1" runat="server"> <div class="wrapper"> <div> ...

javascriptcssasp.net

Steps for incorporating buttons and input fields on a WordPress website

I recently customized an HTML block on my WordPress.com site and created a simple code snippet to function as a search widget. I've experimented with various approaches, such as attempting to trigger a script function with a button, making the functi ...

htmlwordpress

Data is not being stored in Parse

I am currently facing a challenge while working with Parse for Javascript: When users sign up, along with their username and password, I also need to save their first and last names in Parse. However, at the moment, only the username and password are bein ...

javascriptjsonhtmlparse-platform

"Performs smoothly in Postman, but doesn't function as effectively in

I have a requirement to showcase a dynamically generated variable from views.py in my login.html. The username (voucher) is being generated in views.py and I need it to be automatically populated in my login.html. Please note that the mpesa_body contains d ...

htmlpython-3.xdjango

Trouble pausing CSS slide using -webkit-animation-play-state:paused; finding it ineffective

Below is the code snippet in question: .picTransition .item { position: absolute; left: 0; right: 0; opacity: 0; -webkit-animation: picTransition 56s linear infinite; -moz-animation: picTransition 56s linear infinite; -ms-animation: ...

htmlcssanimationhoverslide

Utilize JavaScript to iterate through a JSON object and retrieve the indices that meet the specified criteria

While I found a previous answer that somewhat addresses my issue, I am seeking guidance on how to return an array of the indexes where a specific value appears. For example, if **18A38** is the target value, it should return the positions [1,3]. The sampl ...

javascripthtmljson

Alter the div's HTML content once the Ajax operation is completed

I have a div element that looks like this: <div class="progress" id="progress-bar"></div> I am using the following JavaScript code along with an ajax call to retrieve some data. The data returned is 0, however, the content is not being added ...

javascriptjquerycssajaxtwitter-bootstrap

Where can I locate HTML codes within WordPress?

Upon inspecting the page source, I came across the following code snippet; I attempted to search within WordPress for the HTML codes that are displayed here, but unfortunately, I was unable to locate them. I couldn't find any files with a .html exte ...

phphtmlwordpress

Create an interactive musical experience on a webpage using HTML

I'm a newcomer to web technology and I'm trying to dynamically play a music file using Python Django HTML. I have saved the file location in the database and am fetching it. <audio control><source src= {{track.songlocation}} type="audio ...

htmldjangopython-2.7

"The Node.js program is unable to access the contents of the browser.js file when loaded in

After spending an unreasonable amount of time trying to debug this issue, I am still unable to resolve it. Currently, I am following a udemy tutorial where the instructor implements the same code provided below. However, despite my efforts, the code is not ...

javascripthtmlnode.jsexpress

Combining all CSS files into one and consolidating all JavaScript files into a single unified file

Whenever I need to add a new CSS or JS file, I always place it in the header section like this Add CSS files <link rel="stylesheet" href="<?php echo URL; ?>public/css/header.css" /> <link rel="stylesheet" href="<?php echo URL; ?> ...

javascriptcssweb-applicationsweb

Adjusting SVG size based on the position of the cursor for transforming origin

My goal is to scale an SVG circle using the trackpad (by moving two fingers up and down), with the origin of the transform being the cursor position. Initially, the scaling works as intended, but on subsequent attempts, the circle changes position, which s ...

javascripthtmlcsssvgcss-transforms

Is there a way to set a default CSS background image using JavaScript in case the specified

When working with regular CSS, I can easily set a fallback image using this code in case the primary image is not available: .container { background-image: url(pics/img.webp), url(pics/img.png); } But when it comes to setting styles in JavaScript (such ...

javascriptcssreactjsimagefallback

Ways to ensure the bootstrap table header width aligns perfectly with the body width

I am having an issue with my bootstrap table where the header width is smaller than the body width because I set the table width to auto. How can I align the header and body widths? Here is a link to a plunker showcasing the problem. https://plnkr.co/edit ...

javascripthtmlcsstwitter-bootstrapangular-ui-bootstrap

Designing Tables for User Interfaces

In a table with 4 rows, the first row must always be filled by the user. The remaining rows are optional. What is the best way to visually indicate this requirement? This should be achieved using only HTML, CSS, and jQuery. ...

htmlcssrow

What is the best way to begin IMA HTML5 SDK ads with sound off?

One challenge I encountered was getting autoplay video to work on iOS 10 using HTML5. To achieve this, I utilized the following code: <video autoplay loop muted playsinline controls> <source src="http://distribution.bbb3d.renderfarming.net/vi ...

javascriptioshtmlimasdk

Store the content of an HTML div using HTML5 Drag and Drop functionality in a MYSQL database

Here's a simple scenario: I have 3 small divs (1, 2, 3) and I want to place them inside 3 other divs (4, 5, 6). That's no issue, but then I need to store the data in MySQL, such as 4-1, 5-2, 6-3 for instance. I can use JavaScript to display the n ...

javascriptphpmysqlhtmldrag-and-drop

Implementing a function to load HTML pages upon clicking a button with JavaScript

I need help creating a button that loads an HTML page using JavaScript, without redirecting to the page. However, the current code I have is not loading the HTML page as desired. Here is the code snippet in question: <!DOCTYPE html> <html> &l ...

javascripthtmlajax