Achieving a full-screen div or video that remains fixed in a specific position on the browser window can be done by following these steps

I am seeking guidance on how to create a video or div that remains fixed in a specific position while adjusting its size to always match the browser window. You can see an example of what I am aiming for here.

The website mentioned above contains a video as its background, and when you resize the browser window, the video adjusts accordingly. This is the effect I am trying to achieve.

Below is the code I have implemented:

#menuContainer{
width:650px;
height:50px;
position:relative;

z-index:3;

margin-top:0;
margin-right:auto;
margin-bottom:0;
margin-left:auto;

background-color:rgb(183, 52, 178);
}

#menuLogo2{
height:50px;
width:126px;
}


#menuDevide1{
width:1px;
height:45px;
background-color:black;
position:relative;
top:-47.5px;
left:131px;
margin-top:auto;
margin-right:0;
margin-bottom:auto;
margin-left:0;
}
...

#mainOverlay{
position:absolute;
top:0px;
left: 0px;
heightx:100%;
height:100%;
background-color: rgba(0,0,0,0.3);
}

For a different view, you may want to explore this JSfiddle.

Please note that I have used their video as a placeholder and do not intend to infringe on their work.

ISSUE DETECTED POST MAIN FIX

After resolving the main problem, I noticed a narrow grey edge appearing on the right side when resizing the browser window to the left. The issue seems to disappear when resizing to the right. For a visual representation, refer to this image or check out this JSfiddle. Any assistance in rectifying this matter would be greatly appreciated!

You might find it beneficial to copy the code from JSfiddle and save them in files on your computer. The appearance might seem odd in JSfiddle but should display correctly in web browsers.

htmlcssvideosize

Answer №1

HTML

<div class="wrapper">
    <div class="h_iframe>
        <iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

CSS

html,body        {height:100%;  margin:0;}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}

VIEW DEMO

ANOTHER DEMO

Let's explore the video tag below:

HTML

<div class="wrapper">
  <video class="videoInsert">
  <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4>
  <source src="movie.ogg" type="video/ogg>
  Your browser does not support the video tag.
 </video>
</div>

CSS

.videoInsert {
    position: absolute; 
    right: 0; 
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
    width: auto; 
    height: auto; 
    z-index: -100;
    background-size: cover;
    overflow: hidden;
}

FINAL DEMO

Additionally, we need jQuery for the following HTML content:

HTML

<div id="video-viewport">
    <video autoplay preload width="640" height="360">
        <source src="https://s3.amazonaws.com/whiteboard.is/videos/bg-loop-new.mp4" />
    </video>
</div>

CSS

#video-viewport {
    position: absolute;
    top: 0;
    left:0;
    overflow: hidden;
    z-index: -1; /* for accessing the video by click */
}
body{
    margin:0;
}

JavaScript

var min_w = 300; // minimum video width allowed
var vid_w_orig;  // original video dimensions
var vid_h_orig;

jQuery(function() { 

    vid_w_orig = parseInt(jQuery('video').attr('width'));
    vid_h_orig = parseInt(jQuery('video').attr('height'));
    $('#debug').append("<p>DOM loaded</p>");

    jQuery(window).resize(function () { resizeToCover(); });
    jQuery(window).trigger('resize');
});

function resizeToCover() {

    // set the video viewport to the window size
    jQuery('#video-viewport').width(jQuery(window).width());
    jQuery('#video-viewport').height(jQuery(window).height());

    // use largest scale factor of horizontal/vertical
    var scale_h = jQuery(window).width() / vid_w_orig;
    var scale_v = jQuery(window).height() / vid_h_orig;
    var scale = scale_h > scale_v ? scale_h : scale_v;

    // don't allow scaled width < minimum video width
    if (scale * vid_w_orig < min_w) {scale = min_w / vid_w_orig;};

    // now scale the video
    jQuery('video').width(scale * vid_w_orig);
    jQuery('video').height(scale * vid_h_orig);
  
    // center the video
    jQuery('#video-viewport').scrollLeft((jQuery('video').width() - jQuery(window).width()) / 2);
    jQuery('#video-viewport').scrollTop((jQuery('video').height() - jQuery(window).height()) / 2);
};

CHECK OUT THE DEMO HERE

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

the submit button seems to be malfunctioning

Hi there! I recently created a contact page using Dreamweaver for my website. However, after uploading my blog, the submit button on the contact form doesn't seem to be working. The technical support team at WordPress suggested that I need to edit som ...

phphtmlwordpressbuttonsubmit

Include a tab button within a vertical tab list using Angular Material

I have utilized Angular Material to create a vertical tab, and I would like to incorporate an Add Tab button within the tab listing itself. Currently, when I add the button, it appears at the bottom of the layout instead. For reference, you can access the ...

cssangulartabsangular-materialmaterial-design

What is the reason behind causing the overflow to become visible on the parent anchor when a child anchor is added?

I've been facing a puzzling issue for the past day. I am working on creating a website that resembles Windows 8, where each box represents a list item. The code is more complex than what I have shared here, but the problem seems to be isolated... &l ...

htmlcss

Issue with style display:none not functioning in IE8, IE9, and IE10 when in Compatibility View mode

I am facing an issue with two DIVs on my webpage. One of them is set to have display:none based on certain conditions. Surprisingly, it works perfectly fine on IE10, Firefox, and Chrome. However, the problem arises on IE8, IE9, and IE10 Compatibility Vie ...

javascriptjqueryhtml

Unable to Toggle Bootstrap 5 Dropdown

Take a look at my code below. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor ...

javascripthtmlcssvue.js

Executing a component's method using HTML in Vue2

In my development project, there is a .vue file named ServiceList. This file imports the component called Information.vue. My objective is to execute the code from the Information component in a loop within the template of the ServiceList file. Here is an ...

javascripthtmlmethodsvue.jscomponents

Using jQuery, we can replace all `<span>` elements with `<img>` elements and then verify if the images have been successfully loaded

Similar Inquiry: jQuery check if image is loaded I find myself in a scenario where the following HTML structure is utilized: <div class="image"> <img class="" src="content-images/1.jpg"> <span class="slide" rel="content-images/ ...

javascriptjquerycssimage

Using jQuery, selectively reveal and conceal multiple tbody groups by first concealing them, then revealing them based on

My goal is to initially display only the first tbody on page load, followed by showing the remaining tbody sections based on a selection in a dropdown using jQuery. Please see below for a snippet of the code. //custom JS to add $("#choice").change(func ...

javascriptjqueryhtmlcss

Shrink or vanish: Creating a responsive header image with Bootstrap

Looking to create a dynamic header with different sections such as headerright, headercenter, and headerleft, each with unique content. I've successfully added an image to the header, but when I resize the page or view it on a mobile browser, the ima ...

jqueryhtmlcsstwitter-bootstrap

Add a class by utilizing the :class attribute

I reviewed the documentation, but I am still struggling to implement this in my project. Initially, I simply want to display a specific class using vue.js that I can later modify dynamically. I just need to establish the default behavior of that class, so ...

javascripthtmlcssvue.jsvuejs2

Utilizing Jquery on the client side in conjunction with a Node.js server

I am using nodejs within a docker-compose container to create a local web app. My goal is to use jquery on the client-side to load an HTML file into a div, but I'm encountering issues with it not working properly. Both the initial index.html and the n ...

javascripthtmljquerynode.jsexpress

How to show a tooltip inline by utilizing CSS styling

Working on a sticky side bar menu with a tooltip feature. While it appears correctly in Chrome and Safari, the tooltip is off-center in IE. This snippet seems to be causing the issue: /* Vertically center tooltip content for left/right tooltips */ .tool ...

htmlcssinternet-explorer

Can a Material UI Select element be made unresponsive to hover effects?

When a user hovers over an element, I want to achieve the following functionality: document.getElementById("dropdownCategory").disabled = true; <Tooltip arrow placement="right" title={props.description} > <FormControl id="dro ...

cssreactjsmaterial-ui

What is the best method for creating uniform cards with different amounts of text that won't cause overflow issues?

At the moment, I have a container that acts as a boundary for a group of cards: .cards-container { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; margin-top: 20px; border: 5px solid violet; } .card { ...

htmlcssreactjs

What is the best way to incorporate three divs into a single line while maintaining a responsive design

Struggling with adding a logo above a login form? As a PHP developer without design expertise, achieving a responsive layout like the image below may seem daunting. To create this layout, consider using the following code: <style> .container { ...

htmlcssflexbox

What is the process for encoding images in HTML code?

Is there a method to embed a background image directly in the HTML code? For instance: background-image: url(data:image/gif;base64,XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX); If I have an image file, can I encode its data and t ...

csshtml

Can you explain the significance of 'height: 0;' in CSS coding?

I've recently come across some outdated CSS code that sets the height to height: 0; in multiple places. I'm curious about what this 0 signifies and what unit it is measured in. If anyone could provide some insight, I would greatly appreciate it. ...

htmlcss

Insert a page break after content for desktop browsers

Is it possible to control the display of sections on different screen sizes? I have a page that looks good on 15" laptops, but larger resolutions cause the next section to appear on the first screen. Is there a way to show the next section only on th ...

javascriptcsspage-break

Creating a dynamic nested list in HTML using JavaScript with data retrieved from a JSON source

I'm trying to generate a dynamic nested ul\li list from a JSON array. IMPORTANT! While I can use jQuery for this transformation, it's in a node.js environment where DOM access is restricted and I must work with a string. The depth of the a ...

javascripthtmlarraysjsonnode.js

How to perfectly position multiple tables using CSS

I am relatively new to the world of HTML and CSS. I have successfully created several tables, but now I am struggling to display them all on a single line within a designated box. Despite my best efforts, I have not been able to achieve the desired result. ...

htmlcsscss-tables