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

Utilizing HTML and JQuery to clear form values

I am attempting to transfer the form data along with an additional parameter "id" to the server using Python and Google App Engine. This is my form: <form method="post" action="/" id="form1" runat="server" enctype='multipart/form-data'> ...

jquerypythonhtmlajaxgoogle-app-engine

Is it possible to keep my JavaScript scripts running continuously within my HTML code?

I recently set up a JavaScript file that continuously queries an API for updates. It's currently linked to my index.html, but I'm looking for a way to keep it live and running 24/7 without requiring the browser to be open. Any suggestions on how ...

javascripthtml

Updating rows within a table dynamically using AJAX

I currently have a table with an empty body: <table id="tablem" border="1" width="100"> <thead> <tr> <th style="width: 10%">PageName</th> <th style="width: 5%">Lang</th> ...

htmlasp.netajaxhtml-table

jQuery Menu shuts down with a .slideToggle load when clicked away from the menu

I have encountered similar questions regarding my menu open/close functionality, which is operated by slideToggle() instead of a class. I prefer not to modify my CSS to make it functional. The requirement is for the menu to close when the user clicks anyw ...

jqueryhtmlcss

Tips for Utilizing PHP Without the Need to Refresh the Page

Below are the contents of three files with their respective code: Controler.php <iframe id="frame1" style="display:none"></iframe> <iframe id="frame2" style="display:none"></iframe> <button onClick="document.getElementById(&apo ...

javascriptphphtmlajaxmysqli

Easily accessible button and span located on the right side

One issue I'm facing is that the button and span are not aligned on the same line. Is there a way to resolve this? <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/c ...

htmlcsstwitter-bootstrap

The toggle checkbox feature in AngularJS seems to be malfunctioning as it is constantly stuck in the "off"

I am trying to display the on and off status based on a scope variable. However, it always shows as off, even when it should be on or checked. In the console window, it shows as checked, but on the toggle button it displays as off Here is the HTML code: ...

javascripthtmlcssangularjstwitter-bootstrap

`There are two text boxes in a blog post editor within tinyMCE`

I'm currently working on building a blog app using Django. The issue I'm facing is related to the Tinymce editor in the post creation form. Everything works perfectly fine except for one annoying element that shows up within the text box itself. ...

htmldjangotinymce

The res.download() function in Express is failing to deliver the accurate URL to the client

When trying to utilize the res.download() method for downloading specific files from a server, there is an issue where triggering the res.download does not redirect the client to the correct URL. The files intended for download are located in a directory s ...

javascripthtmlcssnode.jsexpress

The date-picker element cannot be selected by html2canvas

I'm encountering an issue with Html2canvas while trying to capture a screenshot of my page. Specifically, the date shown in the date-picker on the page is not appearing in the screenshot. Do you have any insights into why this might be happening and h ...

javascripthtmljquerycss

Do you think it's achievable to modify the color using CSS's order attribute?

When I look at the code in Firefox's inspector, I notice this : element { order:35; } Can a color be assigned to it? I am customizing my year outlook calendar and have set a particular day to display in a different color. But when I click on the mo ...

htmlcsstags

Is it possible to conceal a form field until a previous field has been completed?

Looking for a way to hide a form field until another field is properly completed? I have a divided registration form and want the second field to appear only when the first one is valid. Preferably using CSS3, with HTML5 and maybe some JavaScript if necess ...

javascripthtmlformscss

Attaching onchange event to a select menu

I'm a bit confused about how to bind the onchange event to a select element. There seem to be multiple ways to accomplish this. HTML <select id="ddl" onchange="test()"></select> jQuery $(function(){ $("#ddl").change(function(){ ...

jqueryhtmlevents

JavaScript function is not identifiable

I am currently developing a tic-tac-toe game with 9 buttons that will display either an X or O image depending on the boolean value of the variable isX. The main container for these buttons is a div element with the id 'stage' and each button ha ...

javascripthtmlcssfunction

Designing the KendoUI combo box with a touch of style

Is there a way to customize the style of required and invalid fields for KendoUI elements, such as changing the background color of a required input field? I have been using the following styles: .k-textbox>input[required], .k-picker-wrap .k-input[re ...

cssvalidationstyleskendo-uikendo-combobox

Creating a custom progress bar using Javascript and Jquery

I developed a progress bar that is fully functional. Here is the HTML structure: <div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style ...

javascriptjqueryhtmlajaxprogress-bar

Scrolling horizontally in md-list

I have a list of items where each item can be of varying lengths horizontally: https://i.sstatic.net/ITIQd.png The issue is that long items are getting cut off on the right side. Here's the code snippet I am currently using: <md-list-item ng-repea ...

cssangularjsangular-material

Accessing and showcasing MySQL information using hidden forms

I'm facing an issue with displaying the selected data from MYsql. The values are stored in my database fields, and I want the review of the chosen movie to show up when the user clicks the submit button, but it's not working as expected. Below i ...

phphtmlmysql

Ordering styles in Material UI

I've spent countless hours customizing this element to perfection, but the more I work on it, the more of a headache it gives me. The element in question is an outlined TextField, and my focus has been on styling its label and border. Initially, I th ...

javascripthtmlcssreactjsmaterial-ui

Creating an Interactive Table Using HTML, JavaScript, and PHP?

After reviewing this project, I am looking to customize the js function in relation to my own table. The key focus is on the following code: $("#employee_table tr:last").after("<tr id='row"+$rowno+"'><td><input type='text&apo ...

javascriptphphtml